美文网首页
vue ---- elementui中confirm弹窗确定按钮

vue ---- elementui中confirm弹窗确定按钮

作者: 牛会骑自行车 | 来源:发表于2022-11-16 09:04 被阅读0次

    用到了$msgBox, 具体参考https://element.eleme.cn/#/zh-CN/component/message-box搜索“自定义”

    /**
     * 
     * @param {String} param0 
     * @param {Function} close 
     */
    export const dpConfirm = ({
        title,
        content,
        type,
        confirmBtnText
    } ={}, close) => {
        let vue = new Vue();
        
        const h = vue.$createElement;
        vue.$msgbox({
            title: title || '提示',
            message: h("p", null, [h("span", null, content || "数据删除后无法恢复, 确认删除吗?")]),
            showCancelButton: true,
            confirmButtonText: confirmBtnText || '确定',
            cancelButtonText: "取消",
            type: type || 'warning',
            beforeClose: (action, instance, done) => {
                if (action === "confirm") {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = confirmBtnText || '确定';
    
                    close(() => {
                        instance.confirmButtonLoading = false;
                        done();
                    });
                } else {
                    done();
                }
            },
        });
    }
    

    使用页面记得先引入
    第一个参数为里面使用到的各种....封装方法里面有设置默认值. 第二个参数为想要结束loading时需要使用的回调函数

    dpConfirm({}, (done) => {
        setTimeout(() => {
            done()
        }, 4000)
    });
    

    tada~~~你的confirm按钮就可以loading啦~

    相关文章

      网友评论

          本文标题:vue ---- elementui中confirm弹窗确定按钮

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