mint-ui之Message-box自定义样式，添加取消按钮的回调函数

背景：在mint-ui中的message-box中，有时候，官方文档给出的样式，无法满足自定义的需求，而且，里面的取消按钮没有相应的回调函数，需要自己根据需求进行自定义解决。

一、js相关代码

MessageBox.confirm('',{
    message:'请确认银行签约结果',
    title:'温馨提示',
    showConfirmButton:true,
    showCancelButton:true,
    cancelButtonClass:'cancelButton',
    confirmButtonClass:'confirmButton',
    confirmButtonText:'签约成功',
    cancelButtonText:'暂不签约',
}).then(action => {
    //确认回调
    this.payFun(true);
},action =>{
    //取消回调
    this.showsmscode2 = 1; 
    this.buyAjaxFlag = false;
})

二、自定义样式

cancelButtonClass:'cancelButton',

confirmButtonClass:'confirmButton',

这两行代码，部分CSS如下：

.cancelButton{
    width:50%;
    border-right: 1px solid #ddd;
    line-height: 35px;
    display: block;
    background-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    border: 0;
}
.confirmButton {
    color: #26a2ff;
    width: 50%;
    line-height: 35px;
    display: block;
    background-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    border: 0;
}

 最终结果图如下所示：

参考博客：mint-ui Message-box 自定义样式  https://blog.csdn.net/huipo22/article/details/78180151