刷新页面，无论点击多少次让Element UI的Message消息提示弹出一个

 

一、遇到的问题

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况（毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响），但既然测试提出来了那还是要解决的。

最开始查了下Element UI的官方文档，发现确实没提供只弹出一次的功能。其他的如MessageBox和Notification都不太符合要求，更重要的是Message已在项目中大量存在，如果不能在全局解决的话，修改成本实在是太高昂了 。

 

二、解决方案：

在vue中使用Element的message组件

• 在vue文件中使用

this.$message({
  message: "提示信息",
  type: "success"
})

• 在js文件中使用

import ElementUI from 'element-ui';
ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

解决消息弹窗重复显示

// message.js
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')
class DonMessage {
  success (options, single = true) {
    this[showMessage]('success', options, single)
  }
  warning (options, single = true) {
    this[showMessage]('warning', options, single)
  }
  info (options, single = true) {
    this[showMessage]('info', options, single)
  }
  error (options, single = true) {
    this[showMessage]('error', options, single)
  }

  [showMessage] (type, options, single) {
    if (single) {
      // 判断是否已存在Message
      if (document.getElementsByClassName('el-message').length === 0) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}
export default new DonMessage()

在有需要的地方引入

import DonMessage from '@/message'

• js文件中直接使用

DonMessage.warning('请登录')

• 挂载到vue原型上

// main.js
Vue.prototype.$message = DonMessage

// vue文件中调用
this.$message.warning("请登录")