Element Plus ElMessage防重复提示优化方案

1. 问题背景与场景分析

在前端开发中，Element Plus 的 ElMessage 组件是常用的消息提示工具。但在实际业务场景中，特别是处理登录状态异常时，经常会遇到多个接口同时返回登录过期提示的情况。这时候如果直接调用 ElMessage 显示错误信息，会导致页面同时弹出多个相同的提示框，严重影响用户体验。

典型场景示例：

• 用户登录状态过期后
• 同时发起多个需要鉴权的接口请求
• 每个接口都返回 401 未授权状态码
• 前端对每个错误响应都调用了 ElMessage.error() 方法
• 最终页面上会堆叠显示多个完全相同的错误提示

这种重复提示不仅显得不专业，还会干扰用户操作。理想的情况应该是：无论有多少个接口同时报错，相同内容的提示只显示一次。

2. 解决方案核心思路

2.1 技术实现原理

Element Plus 的 ElMessage 组件本身提供了防重复机制，但需要正确配置才能生效。核心解决方案基于以下技术点：

1. 重复消息判定：ElMessage 会对比新消息与当前显示消息的内容
2. 防抖机制：短时间内相同的消息会被合并
3. 单例模式：通过配置确保同一时间只存在一个实例

关键配置参数：

• durable: 控制消息是否持久化
• grouping: 是否启用消息分组
• repeatNum: 重复消息的显示次数

2.2 具体实现方案

方案一：全局配置法（推荐）

在应用初始化时统一配置 ElMessage 的默认行为：

javascript复制// main.js 或入口文件
import { ElMessage } from 'element-plus'

ElMessage.config({
  grouping: true,
  repeatNum: 1
})

方案二：单次调用配置法

在每次调用时显式指定参数：

javascript复制ElMessage.error({
  message: '登录已过期，请重新登录',
  grouping: true,
  repeatNum: 1
})

方案三：封装工具函数法

创建统一的提示工具函数：

javascript复制// utils/message.js
import { ElMessage } from 'element-plus'

export const showMessage = (message, type = 'error') => {
  ElMessage[type]({
    message,
    grouping: true,
    repeatNum: 1,
    duration: 3000