下面的点击事件没有任何效果,但是如果换成onclick绑定事件则会提示没有该方法。主要原因是:
模版字符串中拼接的html片段中的方法调不到vue中this.methods里的东西,因为methods里的代码是编译后在浏览器里运行的,这个时候拼接的方法绑定的click 被当成字符串解析了。
但是问题来了,模版字符串中onclick的点击事件,无法调用vue的methods中的方法,需要按照原生方式来写,所以就需要将goRuleCreat方法绑定到全局对象window上
mounted() {
window.goRuleCreat = this.goRuleCreat
},
methods:{
errTipsFun(error) {
let index = error.message.lastIndexOf('_')
let msg = error.message.substring(0, index)
let ruleId = error.message.substring(index + 1, error.message.length)
this.tipRuleId = ruleId.toString()
console.log(this.tipRuleId)
return this.$confirm(
'<p>当前规则与以下规则冲突,无法设置</p><p style="color:#333;font-weight:bold;text-algin:center">' +
`${msg}` +
'<span onclick="goRuleCreat()" style=" color: var(--theme, #137dee);margin:10px;cursor:pointer">前往调整</span></p>',
'规则冲突提醒',
{
showConfirmButton: false,
showCancelButton: false,
type: 'warning',
iconClass: 'el-icon-message-solid',
dangerouslyUseHTMLString: true,
}
).then(() => {})
},
goRuleCreat() {
this.$router.push({ path: `/rule/create?id=${this.tipRuleId}&isEdit=2` })
},
}
以上代码还有一个问题,就是这个confirm弹窗在点击规则前往调整到时候,怎么关闭弹窗。