ELement-UI 中相同的 $message() 只显示最新的一个

当服务器宕机时，同一个页面的所有接口都会报错，导致页面出现一堆消息，本文方法可以让相同内容的消息只显示最后一个。

不支持 .error() 式的用法。

操作步骤

编辑 main.js，添加以下代码：

import { Message } from 'element-ui';
var MessageStack = [];
Vue.prototype.msg = function(config = {}) {
  MessageStack.forEach(function(item = {}) {
    if (item.message == config.message && item.type == config.type) {
      item.close();
    }
  });
  let msg = Message({
    showClose: true,
    ...config,
    onClose: function(msgHandle) {
      typeof config.onClose == 'function' && config.onClose(msgHandle);
      for (let i = 0; i < MessageStack.length; i++) {
        const item = MessageStack[i];
        if (item._uid == msgHandle._uid) {
          MessageStack.splice(i, 1);
          break;
        }
      }
    },
  });
  MessageStack.push(msg);
  return msg;
};

用法

this.$message({
  type: 'error',
  message: '这是原版的用法，多个 message 从上往下显示，不区分 content 和 type 是否相同',
});
this.msg({
  type: 'error',
  message: '这是修改版的用法，相同 type 和 content 的 message 只显示最新的一个',
});