修复Element等框架二次确认点击过快导致多次情况问题

如果你的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 语句来处理错误。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容