怎么给elementui中的 this.$confirm 添加按钮的加载效果

要给element-ui中的this.$confirm添加按钮加载效果，需要使用Vue.js的混合 mixin技术。Mixin是一种在其他组件之间共享代码的方式，它可以在多个组件之间重用某些逻辑并且使得逻辑的代码可以集中在一个地方维护。

我们可以定义一个mixin，然后在需要添加按钮加载效果的组件中导入该mixin，即可使用其中定义的方法和属性。

首先，我们定义mixin，名为loadingButton：

export const loadingButton = {
  data() {
    return {
      buttonLoading: false,
    }
  },
  methods: {
    showLoading() {
      this.buttonLoading = true;
    },
    hideLoading() {
      this.buttonLoading = false;
    }
  }
}

这个Mixin包含了一个数据属性buttonLoading和两个方法showLoading和 hideLoading。showLoading用于显示加载效果，hideLoading用于隐藏加载效果。

接着，在使用this.$confirm创建的对话框中通过mixin导入loadingButton：

import {loadingButton} from '@/mixins/loadingButton';

this.$confirm('确认删除？')
  .then(() => {
    this.$message({
      type: 'success',
      message: '删除成功！'
    });
  })
  .catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });          
  })
  .finally(() => {
    this.hideLoading();  // 隐藏加载效果
  });

最后，我们可以在按钮点击事件中调用showLoading方法，显示加载效果：

methods: {
  handleDeleteClick() {
    this.showLoading();  // 显示加载效果
    this.$confirm('是否删除选中内容？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      // 调用删除逻辑
    })
    .catch(() => {
      // 用户取消删除
    });
  }
}

这样，在点击删除按钮时会先显示加载效果，然后再弹出对话框。当对话框关闭时，无论成功与否，都会调用finally方法，隐藏加载效果。

总之，通过使用Mixin，我们可以在多个需要添加按钮加载效果的组件中共享代码，大大提高了代码复用性和维护性。