el-message 同时弹出多个并且支持同类型但是不同内容的消息【改写el-message】

修改前

 修改后

因为服务断开了 但是拦截器里对每个失败的接口都做了message弹出，因此改写el-message逻辑，仅展示一个同等类型并且不同内容的message窗体 

1. 新建 @/utils/rewriteElMessage.js

如果想同类型 不管内容 使用这种

/**
 * @Event 解决 el-message 同类型重复打开的问题
 * @description:
 * @author: mhf
 * @time: 2024-11-06 15:30:56
 **/
import {Message} from "element-ui";

const typeArr = ['success', 'warning', 'info', 'error'];

class NewMessage {
  static showMessage(type, options, single) {
    if (single && document.getElementsByClassName(`el-message--${type}`).length > 0) {
      return;
    }
    Message[type](options);
  }
}

typeArr.forEach(type => {
  NewMessage[type] = function (options, single = true) {
    this.showMessage(type, options, single);
  };
});

export default NewMessage;

如果不同类型 但是想区分不同内容的 使用这种 

/**
 * @Event 解决 el-message 同类型重复打开的问题 并且支持同类型但是不同内容的消息
 * @description:
 * @author: mhf
 * @time: 2024-11-06 15:30:56
 **/
import { Message } from "element-ui";

const typeArr = ["success", "warning", "info", "error"];

class NewMessage {
  static messageQueue = {};

  /**
   * 显示消息
   * @param {string} type - 消息类型 ('success', 'warning', 'info', 'error')
   * @param {Object} options - 消息选项
   * @param {string} options.message - 消息内容
   * @param {number} [options.duration=3000] - 消息持续时间（毫秒）
   * @param {boolean} [single=true] - 是否单例显示
   */
  static showMessage(type, options, single) {
    if (!this.isValidType(type)) {
      console.warn(`Invalid message type: ${type}`);
      return;
    }

    const messageKey = this.getMessageKey(type, options);

    if (single && this.isMessageShown(messageKey)) {
      return;
    }

    // 显示消息
    Message[type](options);

    // 记录消息
    this.recordMessage(messageKey, options.duration);
  }

  /**
   * 验证消息类型是否有效
   * @param {string} type - 消息类型
   * @returns {boolean}
   */
  static isValidType(type) {
    return typeArr.includes(type);
  }

  /**
   * 获取消息键
   * @param {string} type - 消息类型
   * @param {Object} options - 消息选项
   * @returns {string}
   */
  static getMessageKey(type, options) {
    return `${type}-${options.message}`;
  }

  /**
   * 检查消息是否已显示
   * @param {string} messageKey - 消息键
   * @returns {boolean}
   */
  static isMessageShown(messageKey) {
    return !!NewMessage.messageQueue[messageKey];
  }

  /**
   * 记录消息
   * @param {string} messageKey - 消息键
   * @param {number} [duration=3000] - 消息持续时间（毫秒）
   */
  static recordMessage(messageKey, duration) {
    NewMessage.messageQueue[messageKey] = true;

    // 设置定时器移除消息记录
    setTimeout(() => {
      delete NewMessage.messageQueue[messageKey];
    }, duration || 3000); // 默认3秒后移除记录
  }
}

typeArr.forEach(type => {
  /**
   * 显示指定类型的错误消息
   * @param {Object} options - 消息选项
   * @param {string} options.message - 消息内容
   * @param {number} [options.duration=3000] - 消息持续时间（毫秒）
   * @param {boolean} [single=true] - 是否单例显示
   */
  NewMessage[type] = function (options, single = true) {
    this.showMessage(type, options, single);
  };
});

export default NewMessage;

// howToUse
// import NewMessage from '@/utils/rewriteElMessage';
// NewMessage.error({
//   message: error.response.data.message || error.response.data.error,
//   duration: 5 * 1000
// }, false);

2. main.js

import Vue from "vue";
import NewMessage from "@/utils/rewriteElMessage";
Vue.prototype.$message = NewMessage;

3. 使用

Vue中还是和之前一样 this.$message.success({}, true)

3.1拦截器js中使用

import NewMessage from "@/utils/rewriteElMessage";

    const errorCodeArr = [411, 412, 413, 415, 416];

    if (error.response) {
      NewMessage.error({
        message: error.response.data.message || error.response.data.error,
        duration: 5 * 1000
      });

      if (errorCodeArr.includes(Number(error.response.data.code))) {
        if (!isRelogin.show) {
          isRelogin.show = true;
          MessageBox.confirm(
            "登录状态已过期，您可以继续留在该页面，或者重新登录",
            "系统提示",
            {
              showCancelButton: false,
              confirmButtonText: "重新登录",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              isRelogin.show = false;
              store
                .dispatch("LogOut")
                .then(() => {
                  location.href = "/index";
                })
                .catch(() => {
                  location.href = "/index";
                });
            })
            .catch(() => {
              isRelogin.show = false;
            });
        }
      }
    } 

4. 如果不想区分message类型，即所有类型只展示一次

将rewriteElMessage.js改成如下即可

static showMessage(type, options, single) {
    // if (single && document.getElementsByClassName(`el-message--${type}`).length > 0) {
    if (single && document.getElementsByClassName(`el-message`).length > 0) {
      return;
    }
    Message[type](options);
  }