elementUI的notify的click事件

简宁909

已于 2022-10-21 10:11:48 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2022-10-17 16:42:17 首次发布

本文链接：https://blog.csdn.net/Coco_998/article/details/126608597

本文介绍了ElementUI的Notification通知组件，特别是在创建通知时遇到的点击事件绑定问题。当需要为通知内的不同按钮分配不同事件时，不能简单地将事件绑定到整个弹窗。文章提供了解决这种问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Notification 通知组件

1.Notification是一个通知组件 ,常见用法就是

 popMsg(msg) {
      let htmlContent = this.buildMsgContent(msg);
     let self = this;
     this.$notify.closeAll();
     this.notify = this.$notify({
         title: msg.title || '新消息提醒',
         dangerouslyUseHTMLString: true,
         message: htmlContent,//展示的内容
         position: 'bottom-right',
         duration: 10000,
         type: `${msg.msgCategory=='log'?'warning':'info'}`,
          onClick() {
             self.msgStatus(msg)
             self.$router.push({path: msg.href})
          }
     });
 },

用模板字符串拼接通知内容

  buildMsgContent(msg) {
                let html = `<span class="msg-time">${msg.diffTime}</span>
                    <div><a href="javascript:;">${msg.desc}</a></div>
                    ${msg.msgCategory=='log'&&msg.btnName=='去处理'?
                    `<div class='msg-action2'><div class="msg-log">稍后处理</div><div class="msg-log2"><a  href="javascript:;">${msg.btnName}</a></div></div>`
                    :`<div class="msg-action"><a class="msg-btn" href="javascript:;">${msg.btnName}</a></div>`}`
                return html;
            },

以上写法,点击事件会绑定在整个通知弹窗中,出现弹窗中有几种按钮需要单独处理时,就不能直接绑定在整个弹窗上,如
在这里插入图片描述
稍后处理与去处理调用不同的事件

解决办法

 popMsg(msg) {
    // let htmlContent = this.buildMsgContent(msg);
    let self = this;
    this.$notify.closeAll();
    this.notify = this.$notify({
        title: msg.title || '新消息提醒',
        dangerouslyUseHTMLString: true,
        // message: htmlContent,
        message: msg.msgCategory=='log'&&msg.btnName=='去处理'?
        this.$createElement(
        'div',{},[
            this.$createElement('span',{class:"msg-time"},msg.diffTime),
            this.$createElement('div',{},[
                this.$createElement('a',{},msg.desc),
            ]),
            this.$createElement('div',{class:"msg-action2"},[
                    this.$createElement('div',{class:"msg-log",on:{click:()=>{this.closeNotify()}}},'稍后处理'),
                    this.$createElement('div',{class:"msg-log2"},[
                    this.$createElement('a',{on:{click:()=>{self.msgStatus(msg)}}},msg.btnName),
                    ]),
                    ]
              )
           ]
        ): this.$createElement(
        'div',{},[
            this.$createElement('span',{class:"msg-time"},msg.diffTime),
            this.$createElement('div',{},[
                this.$createElement('a',{},msg.desc),
            ]),
            this.$createElement('div',{class:"msg-action2"},[
                        this.$createElement('div',{class:"msg-action"},[
                        this.$createElement('a',{class:"msg-btn",on:{click:()=>{self.msgStatus(msg)}}},msg.btnName),
                    ]),
                    
                    ]
                )
            ]
        ),
        position: 'bottom-right',
        duration: 10000,
        // duration: 0,
        type: `${msg.msgCategory=='log'?'warning':'info'}`,
        // onClick() {
        //     self.msgStatus(msg)
        //     // self.$router.push({path: msg.href})
        // }
    });
},

closeNotify(){
console.log("稍后处理")
}