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啦~