vue element ui 提示，通知 Notification增加关闭按钮。vue动态创建按钮，并添加事件。minxins 电脑版发表于：2022/7/1 12:57 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) } ```
