vue3封装全局自定义可取消的加载弹框

需求

项目中个别接口请求的数据量大，请求时间长，需要加个可以取消的加载弹框，用户可以选择取消加载。

代码

main.js 文件

import { ElMessageBox } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

// 全局方法挂载
app.config.globalProperties.cancelEnableLoading = {
  show: (text1, text2) => {
    ElMessageBox.alert("", "", {
      message: h("p", null, [
        h(
          "div",
          { style: "color:var(--text-color);font-size: 32px;font-weight: 600;margin-bottom: 16px;" },
          text1
        ),
        h(
          "div",
          { style: "color: var(--primary-color);font-size: 16px;" },
          text2
        ),
      ]),
      type: "info",
      center: true,
      showClose: false,
      showConfirmButton: true,
      confirmButtonText: "取消",
      icon: markRaw(Loading),
    }).then((action) => {
      if (action === "confirm") {
        // 取消
      }
    });
  },
  close: () => {
    ElMessageBox.close()
  }
}

使用

// 显示
proxy.cancelEnableLoading.show("文本1", "文本2")

// 关闭
proxy.cancelEnableLoading.close()