element ui中，Notification组件中消息提示语，如何添加点击事件？

Question

在一个通知消息中，效果是这样

代码

getAibmsWebsocket() {
    this.$global.wsAibms.onmessage = res => {
        console.log(res.data)
        this.$notify({
          title: '告警',
          dangerouslyUseHTMLString: true,
          message: '<p>有一条新告警产生，请前往<span style="color:#0066ff;cursor:pointer">查看</span></p>',
          type: 'warning'
        })
      }
    },

请问如何在查看这个span标签添加点击事件，并把这个res.data数据绑定上去？我用过在标签直接添加@click的方法，但是没有效果，请问这个要如何处理？

Answer 1

this.$global.wsAibms.onmessage = res => {
  console.log(res.data);
  const notify = this.$notify({
    title: '告警',
    dangerouslyUseHTMLString: true,
    message: '<p>有一条新告警产生，请前往<span style="color:#0066ff;cursor:pointer">查看</span></p>',
    type: 'warning',
  });
  
  notify.$el.querySelector('span').onclick = () => {
    // your code

    // 点击后关闭notify 不需要的话可删掉
    notify.close();
  };
};

Answer 2

提供了onClick选项可以传入回调函数的，再根据event.target判断点击的元素即可。

Answer 3

如何不在意点击的元素，其实可以直接在notify上绑定点击事件

// clickMsg是定义的点击事件
this.$notify({
  title: '告警',
  dangerouslyUseHTMLString: true,
  message: '<p>有一条新告警产生，请前往<span style="color:#0066ff;cursor:pointer">查看</span></p>',
  type: 'warning',
  onClick: this.clickMsg
})

如果只有点击span标签，就可以同楼上回答一样，赋值给变量后，找到他下面的元素$el，然后绑定事件