解决elementUI中message消息多次重复展现的问题

页面中多次弹出message框，客户体验度非常不好。

 

 

 

main.js中 重写$message方法

import ElementUI, { Message } from 'element-ui'

// 为了实现Class的私有属性
const showMessage = Symbol('showMessage')
/** 
 *  重写ElementUI的Message
 *  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置
 */
let messageInstance = null;
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 (messageInstance && single) {
      messageInstance.close()//先把原来的关闭
    }
    messageInstance = Message[type](options)//再创建新的消息
  }
}
Vue.prototype.$message = new DonMessage()

在页面中使用下面的写法

this.$message.success("");//success可替换为 info warning error

 

20200528修改

想在vue main.js里面用elementUI的this.$message.error('错误');

修改为Vue.prototype.$message.error('错误');

 

如果想要是使用this.$message({})方法，可参考原文地址：https://blog.csdn.net/dongguan_123/article/details/101290164?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase