[Vue] Add button loading effects to this.$confirm, this.$alert, this.$prompt in elementUI

Article Directory

  • Mainly use the beforeClose method to achieve the effect of loading
  • beforeClose The callback before the MessageBox is closed, which will suspend the closing of the instance
function(action, instance, done)

1. action 的值为'confirm', 'cancel''close'2. instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法。
3. done 用于关闭 MessageBox 实例。
  • Concrete implementation: ( this.$confirm、this.$alert、 this.$promptthe implementation method is the same)
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;
  },
});
  • Before implementation:
    insert image description here
  • After implementation:
    insert image description here

Guess you like

Origin blog.csdn.net/qq_45677671/article/details/131724263