首页 » 工作 » 方法 » 正文

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

发布者:站点默认
2020/11/10 浏览数(75) 分类:方法 ELement-UI 中相同的 $message() 只显示最新的一个已关闭评论

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

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

操作步骤

编辑 main.js,添加以下代码:

import { Message } from 'element-ui';
var MessageStack = [];
Vue.prototype.msg = function(config = {}) {
  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.forEach(function(item = {}) {
    if (item.message == msg.message && item.type == msg.type) {
      item.close();
    }
  });
  MessageStack.push(msg);
  return msg;
};

用法

this.$message({
  type: 'error',
  message: '这是原版的用法,多个 message 从上往下显示,不区分 content 是否相同',
});
this.msg({
  type: 'error',
  message: '这是修改版的用法,相同 content 的 message 只显示最新的一个',
});
点击返回顶部
  1. 留言
  2. 联系方式