vue如何在$notify中添加点击事件以及修改对应的样式

最新推荐文章于 2024-11-05 13:48:17 发布

夏季的微风~

最新推荐文章于 2024-11-05 13:48:17 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_56205895/article/details/134206573

第一种方式：当通知框中有较多的内容需要进行修改的时候可以进行如下的写法

const self = this;
const h = self.$createElement;
      const span = h(
        "label",
        {
          style: {
            fontSize: "14px",
            display: "inline-block",
          },
        },
        message
      );
      const button = h(
        "el-button",
        {
          props: {
            type: "primary",
            size: "mini",
          },
          //为按钮绑定点击事件
          on: {
            click: self.notifyClick,
          },
          style: {
            float: "right",
            fontSize: "12px",
            color: "#fff",
            backgroundColor: "#1890ff",
            border: "none",
            padding: "5px 10px 5px 10px",
            borderRadius: "3px",
          },
        },
        "详情"
      );
      const br = h("br");
      const obj = self.$notify({
        dangerouslyUseHTMLString: true, // 是否将message属性作为HTML片段处理
        title: self.alarmTypeAll(title) + `\n`,
        dangerouslyUseHTMLString: true,
        message: h(
          "div",
          {
            style: {
              width: "100%",
            },
          },
          [span, br, button]
        ),
        type: "warning", // 弹框的种类success/warning/info/error
        duration: 0, // 显示时间，0表示不自动关闭
        position: "bottom-right",
        offset: 0,
        onClose: self.notifyClose,
      self.notifyArray.push(obj);
    },

第二种：直接在内容中进行添加按钮，此方法适用于加个按钮

const obj = self.$notify({
        title: self.alarmTypeAll(title) + `\n`,
        message:
          h(
          "button",
           {
             on: {
              click: self.notifyClick,
             },
             style: {
               float: "right",
               fontSize: "12px",
              color: "#fff",
              backgroundColor: "#1890ff",
              border: "none",
               // width: "70px",
               padding: "5px 10px 5px 10px",
               borderRadius: "3px",
             },
           },
           self.$t("header.detail")
         ),
      
        type: "warning", // 弹框的种类success/warning/info/error
        duration: 0, // 显示时间，0表示不自动关闭
        position: "bottom-right",
        offset: 0,
        onClose: self.notifyClose,
      });

第三种方法可以在上方写一个HTML的内容，在message中放入HTML的内容即可