Element-UI Message Box 使用$msgbox方法自定义模版内容，修改默认样式

实际效果图：

 

代码：

    changeMsgbox (){
      let item = {
        name: '肯德鸡超级星期四'
      }
      const h = this.$createElement;
      this.$msgbox({
        title: '提示',
        message: h('p', undefined, [
          h('div', undefined, `当前优惠券[${item.name}]，可能已过期`),
          h('span', undefined, '如需查询最新优惠信息，请扫码关注公众号【'),
          h('span', { 
            style: 'color: #409EFF;cursor: pointer;text-decoration: underline;' ,
            on: {
              click: () => {
                this.goDetail()
                this.$msgbox.close()
              }
            }}, '【立即前往肯德鸡】'),
          h('span', undefined, '】'),
        ]),
        type: 'warning',
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.goToKFC(item, instance, done)
            console.log('确定')
          } else {
            done();
            console.log('关闭')
          }
        }
      }).then(() => {
        
      }).catch(() => {
          
      });
     }


    goDetail() {
        //todo
    },
    goToKFC(item, instance, done) {
      instance.confirmButtonLoading = true;
      let params = {
        id: item.id,
      }
      API(params).then(res => {
        if (res.code == '200') {
          //todo
          this.$message.success('成功!')
          done();
          instance.confirmButtonLoading = false;
        }
      })
    },

 注意：

接口请求成功只 返回  Promise {<pending>}？？？

原因分析：

原因在promise返回中，主要是在一个异步请求方法（方法1）中使用了另一个异步请求方法（方法2），在方法2中存在返回值

解决方法：只需要在方法1中使用方法2的前面加上await就可以了

    async goToKFC(item, instance, done) {
      instance.confirmButtonLoading = true;
      let params = {
        id: item.id,
      }
      const res = await API(params)
      if (res && res.code === 200) {
        this.$message.success('成功!')
        done();
        instance.confirmButtonLoading = false;
      }
    },

这样就完美解决了问题。