Element UI的Message消息提示每次只弹出一个(两种解决方式)

一:需改动原调用方式

在main.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]({message:options,duration:1500})
      }
    } else {
      Message[type]({message:options,duration:1500})
    }
  }}
Vue.use(ElementUI)
Vue.prototype.$message = new DonMessage()

这种在调用时，需要改成

this.$message.success("删除成功");

二:不需要改动原调用方式

import {  Message} from 'element-ui';
let messageInstance = null;
const overrideMessage = (options) => {
  if (messageInstance) {
    messageInstance.close()
  }
  messageInstance = Message(options)};
['error', 'success', 'info', 'warning'].forEach(type => {
  Message[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options,
      }
    }
    options.type = type
    return overrideMessage(options)
  }
})
Vue.use(ElementUI)
Vue.prototype.$message = overrideMessage;

这种还是按官网示例调用即可

this.$message({
      message: "删除成功",
      type: 'success'
               })