elementUI中的 this.$confirm 添加按钮的loading加载效果

场景

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。本文主要讲解的是$confirm 添加按钮的loading效果

在没点击确定之前，没有loading效果：

在点击确定的时候，按钮会有loading加载的效果：

方法

给删除的按钮设置点击事件，点击按钮，出现弹框

使用 $confirm 的 beforeClose 方法实现loading的效果

      this.$confirm('你确定要将当前项移至回收站吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              /**
               * action 的值为'confirm', 'cancel'或'close'；
               * instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；
               * done 用于关闭 MessageBox 实例
               */
              instance.confirmButtonLoading = true;
              item.is_recycle = 1;
              // 接口请求
              doEdit(item)
                .then(res => {
                  console.log(res);
                  this.$baseMessage(res.msg, 'success');
                })
                .catch(() => {})
                .finally(() => {
                  done();
                  setTimeout(() => {
                    instance.confirmButtonLoading = false;
                  }, 300);
                  this.getList();
                });
            } else {
              done()
            }
          },
        })
          .then(() => {})
          .catch(() => {});