模版字符串拼接点击事件在vue项目中不生效问题

下面的点击事件没有任何效果，但是如果换成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弹窗在点击规则前往调整到时候，怎么关闭弹窗。