elementUI确认消息弹框区分取消和关闭按钮

发布时间 2023-11-07 10:21:45作者: seven(阿贞)

预期效果:

说明:
默认情况下,elementUI的确认消息弹框中取消按钮和右上角关闭按钮,走的是同一个方法,也就是catch方法的回调,如果项目中有区分,默认的是无法支持的。所以要重新配置一下,话不多说,上代码:

    //res.msg表示提示信息内容
    this.$confirm(res.msg, '提示',{
          confirmButtonText: "继续支付",
          cancelButtonText: "升级权益",
          customClass: 'cm_msg', //可以设置自定义css
          distinguishCancelAndClose: true, //区分取消与关闭
          closeOnClickModal: false, //点击遮罩是否关闭弹窗
        }).then((action) => {
          //继续支付按钮代码块
            ***
        }).catch((action) => {
          if (action === 'cancel') {
           //升级权益按钮代码块
            ***
          } else {
            //关闭弹窗
            return;
          }
     });