this.$confirm加loading

在Vue中，可以使用`this.$confirm`方法实现确认框效果，并且结合loading显示加载状态。在引用中的代码中，可以看到在`beforeClose`方法中，通过设置`ctx.confirmButtonLoading = true`来开启loading效果，表示数据正在加载中。在使用loading的地方，一般是在异步请求的回调函数内，即请求发送后，根据接口返回的结果来决定是否关闭loading。

示例代码如下：

this.$confirm('是否确定删除选中的数据?', '警告', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning',
  callback: () => {},
  beforeClose: (action, ctx, close) => {
    if (action !== 'confirm') {
      close();
      return;
    }
    ctx.confirmButtonLoading = true; // 开启loading效果

    // 在这里执行异步请求，例如发送删除数据的接口请求
    // 假设导入的接口文件为import Api from '@/api/project';
    // Api.接口名称(data).then((res) => {
    //   if (res.code == 200) {
    //     this.$successMessage("删除成功");
    //     this.loadData(); // 重新加载数据
    //     close(); // 关闭确认框
    //   }
    // }).finally(() => {
    //   ctx.confirmButtonLoading = false; // 关闭loading效果
    // });
  }
}).finally(() => {});

通过以上代码，当点击确认按钮后，会触发`beforeClose`方法，然后执行异步请求，期间`ctx.confirmButtonLoading`会被设置为`true`，显示loading效果。当请求结束后，无论成功与否，都会执行`finally`方法，将`ctx.confirmButtonLoading`设置为`false`，关闭loading效果。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [vue写的confirm确认框，loading加载中，message提示消息](https://download.csdn.net/download/hsl_1990_08_15/10832364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [给elementUI中的 this.$confirm 添加按钮的加载效果](https://blog.csdn.net/weixin_45990765/article/details/124632557)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]