vue element ui 提示，通知 Notification增加关闭按钮。vue动态创建按钮，并添加事件。minxins

element ui Notification默认没有关闭按钮这些，但是内容可以写html就可以进行一些自定义了。实现效果如下：

实现

在src下面创建一个minxins文件夹，创建一个my_notification.js加入封装代码，方便重用

export default {
  data() {
    return {
      //使用messageId作为弹窗的key，用来获取弹窗的实例，以对对应弹窗进行操作
      notifications: {},
    };
  },
  methods: {
    //关闭单个通知
    closeNotification(message) {
      this.notifications[message.messageId].close();
      delete this.notifications[message.messageId];
    },
    //打开一个新的通知
    openMessageTips(title = "消息提醒", message) {
      let _this = this;
      // this.closeAllNotification();
      let notify = this.$notify({
        title: title,
        // position: 'bottom-right',
        // showClose: false,
        dangerouslyUseHTMLString: true,
        message: this.$createElement("div", null, [
          this.$createElement("div", null, [
            this.$createElement(
              "span",
              { style: { color: "teal" } },
              message.content
            ),
          ]),
          this.$createElement("div", null, [
            this.$createElement(
              "button",
              {
                style: {
                  padding: "7px 13px",
                  margin: "10px -20px 0px 0px",
                  textAlign: "center",
                  textDecoration: "none",
                  display: "inline-block",
                  webkitTransitionDuration: "0.4s",
                  transitionDuration: "0.4s",
                  cursor: "pointer",
                  backgroundColor: "white",
                  color: "black",
                  border: "2px solid #e7e7e7",
                  borderRadius: "4px",
                  fontSize: "14px",
                  color: "#555",
                  float: "right",
                },
                on: {
                  mouseout: function (e) {
                    e.target.style.backgroundColor = "white";
                  },
                  mouseover: function (e) {
                    e.target.style.backgroundColor = "#e7e7e7";
                  },
                  // click: () => { alert(11) }
                  click: _this.closeNotification.bind(_this, message),
                },
              },
              "关闭"
            ),
          ]),
        ]),
        duration: 0,
      });
      // 将messageId和通知实例放入字典中
      this.notifications[message.messageId] = notify;
    },
  },
};

使用

在需要使用的地方引用封装的js:

import minxins  from "@/minxins/my_notification";

然后加入引入的内容

mixins: [minxins],

然后调用方法即可：

mounted() {
  this.openMessageTips("特别提醒",{ content: "[张康]老师，截止[2022-06-30 11:14]你负责的课程系统综合完成率[98.02%]，校排名[1]，集团排名[29]", messageId: "sdfcsdf" })
  // 默认查询未读的数据
  this.getMessage(1, 0)
},

封装的地方关闭按钮加一个回调函数，用来处理关闭后的事情

export default {
  data() {
    return {
      //使用messageId作为弹窗的key，用来获取弹窗的实例，以对对应弹窗进行操作
      notifications: {},
    };
  },
  methods: {
    //关闭单个通知
    closeNotification(message,callback) {
      this.notifications[message.messageId].close();
      delete this.notifications[message.messageId];
      callback(message.messageId)
    },
    //打开一个新的通知
    openMessageTips(title = "消息提醒", message,callback) {
      let _this = this;
      // this.closeAllNotification();
      let notify = this.$notify({
        title: title,
        // position: 'bottom-right',
        // showClose: false,
        dangerouslyUseHTMLString: true,
        message: this.$createElement("div", null, [
          this.$createElement("div", null, [
            this.$createElement(
              "span",
              { style: { color: "teal" } },
              message.content
            ),
          ]),
          this.$createElement("div", null, [
            this.$createElement(
              "button",
              {
                style: {
                  padding: "5px 9px",
                  margin: "10px -20px 0px 0px",
                  textAlign: "center",
                  textDecoration: "none",
                  display: "inline-block",
                  webkitTransitionDuration: "0.4s",
                  transitionDuration: "0.4s",
                  cursor: "pointer",
                  backgroundColor: "white",
                  color: "black",
                  border: "2px solid #e7e7e7",
                  borderRadius: "4px",
                  fontSize: "14px",
                  color: "#666",
                  float: "right",
                },
                on: {
                  mouseout: function (e) {
                    e.target.style.backgroundColor = "white";
                  },
                  mouseover: function (e) {
                    e.target.style.backgroundColor = "#e7e7e7";
                  },
                  click: _this.closeNotification.bind(_this, message,callback),
                },
              },
              "关闭"
            ),
          ]),
        ]),
        duration: 0,
      });
      // 将messageId和通知实例放入字典中
      this.notifications[message.messageId] = notify;
    },
  },
};

比如在关闭按钮中处理一下消息让消息变为已读

// 直接弹出通知
for (let index = 0; index < taskMessageList.length; index++) {
  setTimeout(() => {
    const element = taskMessageList[index]
    _this.openMessageTips("特别提醒",{ content: element.messageContent, messageId: element.id },(msid)=>{
        // alert("点击关闭了:"+msid)
        // 关闭的时候调用后台接口，把消息标记为已读
        this.$http.post('/education/api/TaskMessage/UpdateTaskMessageIsRead', { Id: msid, IsRead: 1 })
    })
  }, index * 500)
}