element如何避免message组件重复弹出问题

前言

在项目开发中，我们经常使用到 element 中的 message 消息提示组件。但是你是否遇到过一个问题：当需要连续弹出多个消息提示时，element 会弹出多个弹框，使界面看起来十分混乱。本文将带你解决这一问题，让你的界面更加美观整洁！

---

问题截图

---

原因分析

可以看到，消息提示是动态向页面根节点插入 message 元素来实现弹框效果的，也就是说它们都拥有 message 的属性，通过这个信息我们就可以判断页面中 message 的个数来决定要不要弹出第二个提示框从而解决这个问题。

---

解决方案

通过上述我们已经知道了问题所在和解决问题的思路，下面我们需要的就是将思路转为实操，如下：

1. 在项目中创建 optimizePop.js 文件

// 重置 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

---

2. main.js 中引入文件并挂载

import message from '@/utils/optimizePop.js' //引入
Vue.prototype.$message = message //重写message提示框，注意: 此行代码一定要放在vue.use(ElementuI)后面，否则不生效

---

最终实现效果如下图：