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)后面,否则不生效
相关推荐
默_笙9 小时前
🎉 AI 项目里为什么需要 BFF?因为我实在不想在前端处理二进制流
前端·javascript
Revolution619 小时前
改一个订单筛选,为什么要在六个目录里来回找,前端项目目录到底要怎么拆
前端·前端工程化
阳光是sunny9 小时前
LangGraph高级教程:Multi Schema多状态管理详解
前端·人工智能·后端
mCell10 小时前
从 TodoList 到 Microsoft To Do:全栈工程师到底要管什么?
前端·编程语言·全栈
阳光是sunny10 小时前
LangGraph实战教程:状态管理与`graph.invoke`入参深度解析
前端·人工智能·后端
神奇小汤圆10 小时前
深入解析 Flink Kafka Connector:原理、配置与最佳实践
前端·后端
科技之门10 小时前
百公里管网漏损分级定位实战方案2026
前端·人工智能·算法
xyphf_和派孔明11 小时前
企业级微前端项目完整创建步骤,第三步:配置 Vue 子应用
前端·javascript
自强的小白11 小时前
条件查询或查询全部时时前端请求数据等时间格式
前端
阳光是sunny11 小时前
LangGraph实战教程:一文搞懂图的状态(State)管理
前端·人工智能·后端