elementUI的messagebox中自定义html内容执行点击事件-VNode

elementUI的messagebox中内容执行点击事件-VNode

先来看看需求

此为elementUI的this.$confirm 我们需要在点击 去续费 跳转到续费页面

解决办法

使用VNode 在elementUI官网中也有介绍https://element.eleme.cn/#/zh-CN/component/message-box#zi-ding-yi

	const h = this.$createElement;
    this.$msgbox({
      title: '文件上传',
      message: h('p', undefined, [
        h('span', undefined, '当前空间不足，请先进行扩容后再进行上传！ '),
        h('span', { 
          style: 'color: #ff7d38' ,
          on: {
            click: () => {
              this.goToRenew()
            }
          }}, '去续费')
      ]),
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          this.goToRenew()
        } else {
          done();
        }
      }
    }).then(action => {
    });