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)后面,否则不生效
相关推荐
xhxxx几秒前
《深入理解 JavaScript 对象:属性命名、访问与遍历的那些细节》
前端·javascript
BBB努力学习程序设计1 分钟前
Web App开发基础知识:从零构建现代化Web应用
前端·html
BBB努力学习程序设计3 分钟前
使用Bootstrap框架搭建简单页面:快速构建现代化网站
前端·html
西洼工作室3 分钟前
CSS响应式布局全攻略
前端·css·响应式布局·栅格系统
用户93816912553605 分钟前
VUE3项目配置
前端
mm-q291522272913 分钟前
云原生开发实战:从入门到精通 Vue3、Vite、Pinia、Axios 与 HTML、JavaScript、CSS 项目开发
javascript·云原生·html
MegatronKing33 分钟前
一个有意思的问题引起了我的反思
前端·后端·测试
JohnYan39 分钟前
Bun技术评估 - 30 SSE支持
javascript·后端·bun
鹤归时起雾.1 小时前
CSS属性继承与元素隐藏全解析
前端·css
yzx9910131 小时前
一个嵌入式存储芯片质量评估系统的网页界面设计
开发语言·javascript·ecmascript