vue处理Element-UI中message重复跳出的情况

utils包中新建 optimizePop.js文件

javascript 复制代码
// 重置 message,防止重复点击重复弹出 message 弹框
import { Message } from 'element-ui'
let messageInstance = null
const mainMessage = options => {
  // 如果弹窗已存在先关闭
  if (messageInstance) messageInstance.close()
      messageInstance = Message(options)
}
const arr = ['success', 'warning', 'info', 'error']
arr.forEach(type => {
  mainMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return mainMessage(options)
  }
})
const message = mainMessage
export default message

main.js中导入

javascript 复制代码
Vue.use(ElementUI);
import message from './utils/optimizePop.js' //引入
Vue.prototype.$message = message //重写message提示框,注意: 此行代码一定要放在vue.use(ElementuI)后面,否则不生效
相关推荐
该用户已不存在8 分钟前
这6个网站一旦知道就离不开了
前端·后端·github
Ai行者心易12 分钟前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端·后端
东东23320 分钟前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼25 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽27 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥43 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴1 小时前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长1 小时前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css