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

2022-11-16  本文已影响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啦~

上一篇下一篇

猜你喜欢

热点阅读