element ui Message提示框限制为最多3个

调用message时优先判断是否超出指定数量 如果超出指定数量先关闭第一个

新建js文件 resetMessage.js

/**
 *  重写ElementUI的Message
 * 1、添加一个消息提示窗数量限制、最多3个，超出之后先关闭最开始的一个
 * 2、添加一个蓝色的自定义消息提示窗参数为 blue 用法与'error'、'success'、'info'、'warning'类似
 */
import { Message } from 'element-ui'
const instances = []
const newMessage = options => {
  if (options.type === 'blue') {
    let obj = {
      customClass: 'c_customClass_blue',
      iconClass: 'iconfont iconinfo c_iconClass_info'
    }
    options = Object.assign(obj, options)
  }
  if (instances.length <= 2) {
    instances.push(Message(options))
  } else {
    instances[0].close()
    instances.shift()
    instances.push(Message(options))
  }
}
const messageList = ['error', 'success', 'info', 'warning', 'blue']
messageList.forEach(type => {
  newMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return newMessage(options)
  }
})
export const message = newMessage

在main.js中引入

import { message } from '@/utils/resetMessage';
Vue.prototype.$message = message;

css全局样式

<!--样式-->
// Message消息提示的自定义样式
.c_customClass_blue {
    height:40px;
    background:rgba(239,249,254,1);
    box-shadow:0px 4px 8px 0px rgba(0,0,0,0.05);
    border-radius:4px;
    border:1px solid rgba(0,170,247,0.5);
    .c_iconClass_info{
      margin-right:10px;
      font-size:20px;
      color: #00aaf7;
    }
  }