vue+elementUI重复点击导致多个弹框出现解决方案

500 阅读1分钟

需求:系统中提示多个弹框不能同时出现,一次只弹出一个弹框
在这里插入图片描述
新建resetMessage.js

/** 防止重复点击重复弹出message弹框 **/
import { Message } from 'element-ui';

const resetMessage = (options) => {
  if (document.getElementsByClassName('el-message').length){
    Message.closeAll()
  }
  Message(options)
};

['error','success','info','warning'].forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})

export default resetMessage;

全局使用:在main.js中引入

import resetMessage from '@/util/resetMessage'
Vue.prototype.$resetMessage = resetMessage

参考的大佬的方法:vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法
但是实际直接使用没法覆盖原有的$message,关闭时候判断还是采取了判断元素是否存在的方法,关闭弹框使用了closeAll()方法