文章目录 主要使用 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; }, }); 实现前: 实现后: