vue.js 【Vue】给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果

文章目录

主要使用 beforeClose 方法实现 loading 的效果beforeClose MessageBox 关闭前的回调，会暂停实例的关闭

function(action, instance, done)

1. action 的值为'confirm', 'cancel'或'close'。

2. instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法。

3. done 用于关闭 MessageBox 实例。

具体实现：（this.$confirm、this.$alert、 this.$prompt实现方法一样）

this.$prompt('名称', '新建表单', {

confirmButtonText: '确定',

cancelButtonText: '取消',

beforeClose: async (action, ctx, close) => {

// 如果非确认按钮事件，则直接关闭弹窗

if (action !== 'confirm') {

close();

return;

}

// confirmButtonLoading 是在 elementUI-message-box下的 main.vue 文件中封装的参数

ctx.confirmButtonLoading = true;

try {

// ctx.inputValue 获取 input 输入框的值

await this.createApi(ctx.inputValue);

// 提交成功后关闭窗口

close();

} catch (error) {}

ctx.confirmButtonLoading = false;

});

实现前：实现后：

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙