美文网首页
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