项目中总会遇到需要二次确认的操作
我的项目是vue + element-ui
正常写法

            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                type: 'warning',
                center: true
            }).then(async () => {
                const formData = {
                    'id': this.id,
                };
                let res = await this.$post('/aaa/bbb',formData)
                if (res.code == 1) {
                    // do something
                }
            })

我憋了两个小时憋出来的新写法~~

// utils.js
/**
 * 公用提示窗
 *
 * @export
 * @param {string} [desc='确认操作'] 弹框提示文字
 * @param {string} [title='提示'] 弹框标题
 * @param {string} [confirmButtonName='确认'] 确认按钮文字
 * @param {string} [cancelButtonName='取消'] 取消按钮文字
 * @param {boolean} [distinguishCancelAndClose=false] 关系和取消是否执行同一方法
 * @returns
 */
export function confirm(desc = '确认操作',title = '提示',confirmButtonName = '确认',cancelButtonName = '取消',distinguishCancelAndClose = false){
    return this.$confirm(desc, title, {
        confirmButtonText: confirmButtonName,
        cancelButtonText: cancelButtonName,
        distinguishCancelAndClose: distinguishCancelAndClose,
        closeOnClickModal: false,
        type: 'warning',
        center: true
    })
}

因为在使用confirm时点击确认的回调从.then中传入,所以我认为this.$confirm()会return出一个Promise对象,那么就可以使用await,来试一试

//xx.vue
submitSome(){
    try{
        await utils.confirm.call(this,'确定要删除吗？')
        const formData = {
             'id': this.id,
         };
         let res = await this.$post('/aaa/bbb',formData)
         if (res.code == 1) {
                // do something
         }
    }catch(error){
         console.log(error);
    }
}

此时如果点击取消,就不会继续执行await以后的代码,直接跳转到catch中
如果需要$confirm的关闭和取消有所区别

try {
    await utils.confirm.call(this)
    // do something
}catch (e){
    if(e === 'close'){
          // do something
    }else if(e === 'cancel'){
          // do other thing
    }
}

结束啦~ 欢迎指正

我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243