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('退出成功');
封装优势
优化的主要内容：
- 防重复显示：相同的消息在同一时间只会显示一个
- 类型区分：不同类型的相同消息可以同时显示
- 内存管理：自动清理过期的消息缓存，防止内存泄漏
- 向下兼容：完全兼容现有的
this.$message用法 - 功能增强：
closeAll()- 关闭所有消息closeByType(type)- 关闭特定类型的消息
- 灵活配置：支持所有 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'); // 只关闭错误消息