this.$confirm 确认loading

在Vue开发中，可以使用this.$confirm方法来实现确认对话框，并且可以结合loading效果。在引用[1]中的代码示例中，可以看到在beforeClose方法中，通过设置ctx.confirmButtonLoading为true来开启loading效果，表示正在进行确认操作。然后在接口请求完成后，再将ctx.confirmButtonLoading设置为false，表示确认操作完成。这样就可以在确认对话框中实现loading效果。另外，在引用[2]和引用[3]中也提到了一些关于this.$confirm方法的使用问题和解决方法，可以参考这些方法来解决在确认对话框中使用loading的问题。

相关问题

怎么给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，我们可以在多个需要添加按钮加载效果的组件中共享代码，大大提高了代码复用性和维护性。

this.$confirm("确认删除这条数据脚本?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$http.template .deleteTemplate(row) .then((res) => { this.getList(); }) .catch((err) => { this.loading = false; }); }) .catch(() => { });代码优化

可以将代码进行如下优化：

1. 将确认删除的操作封装成一个函数，以提高代码的复用性和可维护性；
2. 将删除操作和获取列表的操作分离，以使代码更加清晰明了；
3. 在请求过程中添加 loading 状态，以提高用户体验。

优化后的代码如下：

// 封装确认删除的操作
function confirmDelete(row) {
  this.$confirm("确认删除这条数据脚本?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
  .then(() => {
    // 添加 loading 状态
    this.loading = true;
    this.$http.template.deleteTemplate(row)
      .then(res => {
        this.getList();
      })
      .catch(err => {
        console.error(err);
      })
      .finally(() => {
        // 取消 loading 状态
        this.loading = false;
      });
  })
  .catch(() => {});
}

// 调用 confirmDelete 函数
confirmDelete(row);

通过这样的优化，代码变得更加简洁和易于维护。