预期效果:

说明:
默认情况下,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;
}
});