Element 的 Message 多个显示时，只显示一个的封装办法

Element 的 Message 多个显示时，只显示一个的封装办法

实现思路

可以通过自定义 Message 组件的方式来优化，确保多个相同的 Message 只显示一个。

步骤一：创建自定义 Message 工具类

首先，让我们创建一个自定义的 Message 工具类：

src/utils/message.js

import { Message } from 'element-ui';

// 消息缓存和去重管理
class MessageManager {
  constructor() {
    this.messageCache = new Map(); // 存储当前显示的消息
    this.messageQueue = new Set(); // 防止重复消息
    this.debounceTime = 300; // 防抖时间（毫秒）
  }

  // 显示消息的核心方法
  showMessage(options) {
    const { message, type = 'info', duration = 3000, ...otherOptions } = options;
    
    // 生成消息的唯一标识
    const messageKey = `${type}-${message}`;
    
    // 检查是否已经有相同的消息正在显示
    if (this.messageQueue.has(messageKey)) {
      return;
    }
    
    // 添加到队列中
    this.messageQueue.add(messageKey);
    
    // 显示消息
    const messageInstance = Message({
      message,
      type,
      duration,
      showClose: true,
      ...otherOptions,
      onClose: () => {
        // 消息关闭时从队列中移除
        this.messageQueue.delete(messageKey);
        if (this.messageCache.has(messageKey)) {
          this.messageCache.delete(messageKey);
        }
      }
    });
    
    // 将消息实例存储到缓存中
    this.messageCache.set(messageKey, messageInstance);
    
    // 自动清理队列（防止内存泄漏）
    if (duration > 0) {
      setTimeout(() => {
        this.messageQueue.delete(messageKey);
        this.messageCache.delete(messageKey);
      }, duration + 100);
    }
    
    return messageInstance;
  }

  // 成功消息
  success(message, options = {}) {
    return this.showMessage({
      message,
      type: 'success',
      ...options
    });
  }

  // 错误消息
  error(message, options = {}) {
    return this.showMessage({
      message,
      type: 'error',
      ...options
    });
  }

  // 警告消息
  warning(message, options = {}) {
    return this.showMessage({
      message,
      type: 'warning',
      ...options
    });
  }

  // 信息消息
  info(message, options = {}) {
    return this.showMessage({
      message,
      type: 'info',
      ...options
    });
  }

  // 清除所有消息
  closeAll() {
    this.messageCache.forEach(instance => {
      if (instance && instance.close) {
        instance.close();
      }
    });
    this.messageCache.clear();
    this.messageQueue.clear();
  }

  // 清除特定类型的消息
  closeByType(type) {
    this.messageCache.forEach((instance, key) => {
      if (key.startsWith(`${type}-`)) {
        if (instance && instance.close) {
          instance.close();
        }
        this.messageCache.delete(key);
        this.messageQueue.delete(key);
      }
    });
  }
}

// 创建单例实例
const messageManager = new MessageManager();

export default messageManager;

步骤二：修改 main.js 全局配置

接下来，我们需要在 main.js 中配置这个封装的 Message
src/main.js

// 导入优化的 Message 组件
import messageManager from '@/utils/message.js'

// 挂载优化的 Message 组件到全局
Vue.prototype.$message = messageManager;

步骤三：更新文件中使用的 Message

然后更新 src/api/index.js 文件，使用我们优化的 Message
src/api/index.js

import messageManager from '@/utils/message.js';

// 响应拦截器：处理响应数据
messageManager.error('接口不存在');
messageManager.error('服务器错误，请稍后再试');

步骤四：更新公共方法（其他js）中的 Message 使用

更新 src/utils/index.js 中的 Message 使用
utils/index.js

import messageManager from '@/utils/message.js'; // 导入优化的 Message 组件
messageManager.success('退出成功');

封装优势

优化的主要内容：

1. 防重复显示：相同的消息在同一时间只会显示一个
2. 类型区分：不同类型的相同消息可以同时显示
3. 内存管理：自动清理过期的消息缓存，防止内存泄漏
4. 向下兼容：完全兼容现有的 this.$message 用法
5. 功能增强：
   • closeAll() - 关闭所有消息
   • closeByType(type) - 关闭特定类型的消息
6. 灵活配置：支持所有 Element UI Message 的原生参数

使用示例

使用方式与原来完全相同：

// 在组件中使用
this.$message.success('操作成功');
this.$message.error('操作失败');
this.$message.warning('警告信息');
this.$message.info('提示信息');

// 高级用法
this.$message.success('操作成功', { duration: 5000 });
this.$message.closeAll(); // 关闭所有消息
this.$message.closeByType('error'); // 只关闭错误消息