Element ui 监听message中链接的点击事件

Element ui 监听message中链接的点击事件

问题代码

this.$message({
  type: ‘error‘,
  dangerouslyUseHTMLString: true,
  showClose: true,
  message: ‘请确认准入完成，<a style="color: #2650ff" onclick="window.location.hash = `#/xxxx/xx`">跳转链接</a>‘,
  duration: 0
})

背景

在使用dangerouslyUseHTMLString属性时需要监听message中的点击事件，并自动关闭message弹窗

解决方案

将message实例存入当前vue实例中，通过document找到message加入事件监听，监听到message点击事件后调用message实例关闭message

const self = this

// 返回当前实例
this.errorMsg = this.$message({
  type: ‘error‘,
  dangerouslyUseHTMLString: true,
  showClose: true,
  message: ‘请确认准入完成，<a id="ErrorMsg" style="color: #2650ff" onclick="window.location.hash = `#/xxxx/xx`">跳转链接</a>‘,
  duration: 0
})
// 监听message实例的点击实例
document.getElementById(‘ErrorMsg‘).addEventListener(‘click‘, function() {
  self.errorMsg.close()
})

Element ui 监听message中链接的点击事件

原文：https://www.cnblogs.com/jidaqi/p/14688565.html