美文网首页html5
更优雅的使用element中的$confirm

更优雅的使用element中的$confirm

作者: 前端小旋风 | 来源:发表于2019-07-18 10:33 被阅读0次

    项目中总会遇到需要二次确认的操作
    我的项目是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

    相关文章

      网友评论

        本文标题:更优雅的使用element中的$confirm

        本文链接:https://www.haomeiwen.com/subject/vneklctx.html