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)后面,否则不生效
相关推荐
支撑前端荣耀6 分钟前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
重铸码农荣光10 分钟前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构
用户40993225021210 分钟前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
Mr_chiu11 分钟前
🚀 效率暴增!Vue.js开发必知的15个神级提效工具
前端
JimmyWhat11 分钟前
Vue单页应用路由404问题:服务器配置与Hash模式解决方案
vue.js
shanLion11 分钟前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript
烟袅13 分钟前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js
前端小万16 分钟前
草稿
前端
闲云一鹤18 分钟前
将地图上的 poi 点位导出为 excel,并转换为 shp 文件
前端·cesium
JIngJaneIL20 分钟前
基于springboot + vue健康管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端