element-ui中的$comfirm区分叉号关闭和取消按钮

今天开发时遇到一个场景，当使用elementUl中的$confirm时 点击取消和点击关闭（叉号）要实现不同的效果：

需求：1.当点击叉号的时候取消弹框 2.点击不通过的时候去调接口

在默认情况下：$confirm 点击 叉号和左边白色（cancelButtonText）按钮的回调返回的参数都是cancel, 点击右侧蓝色按钮（confirmButtonText）回调返回的参数是confirm. 如下图：

为了解决这个问题：element 给了这么一个属性：distinguishCancelAndClose:true

代码示例：

this.$confirm('请选择A或B?', '提示',
{
    confirmButtonText: 'A',

    cancelButtonText: 'B',

    closeOnPressEscape:false,//按下 ESC 键关闭弹窗

    closeOnClickModal:false,//点击遮罩关闭弹窗

    distinguishCancelAndClose:true,//区分取消与关闭

    type: 'warning'
})

.then(() => { //如上图点击通过 })

.catch(action => {

if(action == 'cancel'){//如上图点击不通过 }

else{return // 如上图点击叉号关闭了弹窗}

});

其实当使用完 distinguishCancelAndClose:true 这个参数的时候，点击叉号的回调返回参数变为了close,如下图：