Element Plus 全局 Confirm 弹窗取消和意外关闭处理

因为工作需要，有个需求，需要处理项目里所有用到这个弹窗的取消时的处理，本来是打算一个一个处理，但是工作太繁琐，领导也不给时间，没办法，逼迫自己学会了覆盖 Element plus Comfirm 源码的操作，代码见下：

创建一个包，我认为是个补丁，所以就名字就叫 packages 

// confirmPlugin.js
import { ElMessageBox } from "element-plus";

const mixinConfirm = {
  methods: {
    $confirm(message, title = "提示", options = {}) {
      console.log(message, title, options);
      return new Promise((resolve, reject) => {
        // 调用 Element Plus 的 ElMessageBox.confirm 方法
        ElMessageBox.confirm(message, title, {
          ...options,
          callback: (action) => {
            // 这里获取全局对象
            if (action === "confirm") {
              // 用户点击确定按钮
              // 这里处理点击确定的时候的逻辑
              // ...
              resolve();
            } else {
              // 用户点击取消按钮或关闭对话框
              // 这里处理点击取消的时候的逻辑
              // ...
              reject();
            }
          },
        }).catch(() => {
          // 捕获对话框关闭的情况
          // 这里是关闭时候的弹窗逻辑
          // ...
          reject();
        });
      });
    },
  },
};

export default {
  install(app) {
    app.mixin(mixinConfirm);
  },
};

然后在 main.js 中引入

import { createApp } from 'vue'
import App from '@/App.vue'
import ElMessageBoxConfirm from '@/packages/confirm/index.js';
// 其他内容
// ...
const app = createApp(App);
app.use(ElMessageBoxConfirm).mount('#app');

哇啦啦啦～

完活，因为我的需求是针对所有点击取消的需求，所以我在这个包里直接处理，或者引入一个方法，都可，就看自己需要了！

好久没发 CSDN了，T_T 最近太忙了！加油⛽️