如果你的 Element 等框架存在二次确认点击过快导致多次情况的问题,你可以尝试以下方法来修复这个问题

image-20230104180019342

修复教程

您可以在使用 Element UI 的确认框时,在全局范围内添加一个插件来控制确认框的打开次数。

首先,创建一个 Vue 插件:

// confirm-plugin.js

let isConfirming = false;

const confirmPlugin = {
  install(Vue) {
    const confirm = Vue.prototype.$confirm;
    Vue.prototype.$confirm = function (message, title, options) {
      if (isConfirming) return Promise.reject(new Error("There is an existing confirm"));
      isConfirming = true;
      return confirm(message, title, options)
        .then(() => {
          isConfirming = false;
          return Promise.resolve();
        })
        .catch(() => {
          isConfirming = false;
          return Promise.reject(new Error("Cancelled"));
        });
    };
  },
};

export default confirmPlugin;

然后在应用程序的入口 main.js 处引入并注册这个插件:

import Vue from "vue";
import confirmPlugin from "./confirm-plugin";

Vue.use(confirmPlugin);

现在,您可以在应用程序的任何地方使用 this.$confirm 方法,而不必担心点击确认按钮过快会出现两个确认框。

请注意,在这种情况下,如果在确认框打开时再次调用 this.$confirm 方法,它将返回一个 Promise 对象,该对象的状态为 rejected,因此您需要使用 .catch 语句来处理错误。