先上效果图:
在没点击确定之前,没有loading效果:
在点击确定的时候,按钮会有loading加载的效果:
给删除的按钮设置点击事件,点击按钮,出现弹框
在方法中使用 $confirm 的 beforeClose 方法实现loading的效果
this.$confirm('是否确定删除选中的数据?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback: () => {},
beforeClose: (action, ctx, close) => {
if (action !== 'confirm') {
close();
return;
}
// confirmButtonLoading 是在 elementUI-message-box下的 main.vue 文件中封装的参数
ctx.confirmButtonLoading = true;
// Api 是导入封装接口的文件
//import Api from '@/api/project';
Api.接口名称(data).then((res) => {
if (res.code == 200) {
this.$successMessage("删除成功")
this.loadData()
close();
}
}).finally(() => {
ctx.confirmButtonLoading = false;
})
}
}).finally(() => {})