ElementUI 提示框单例控制：从 2.X 到 3.X 的完整解决方案

在前端开发中，ElementUI 的 Message（消息提示） 和 Notification（通知框） 是高频使用的组件。但在某些场景下，我们不希望它们 同时弹出多个，比如：

• 表单提交，防止重复提示
• 全局错误拦截，避免堆叠报错
• 关键操作反馈，确保用户不被干扰

本文将深入探讨 ElementUI 2.X 和 3.X 如何实现 单例提示框，并提供 最佳实践方案。

1. ElementUI 2.X 的解决方案

2.X 版本对 Message 和 Notification 的支持不同，需分别处理。

（1）Notification（支持 max 配置）

Notification 在 2.X 版本支持全局 max 配置，可限制最大显示数量：

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI, {
  notification: {
    max: 1,  // 同一时间只显示一个
    offset: 20,  // 位置偏移
    duration: 3000  // 自动关闭时间
  }
});

优点：

• 配置简单，无需额外代码
• 自动关闭旧弹窗，确保唯一性

缺点：
❌ 仅适用于 Notification，Message 不支持

（2）Message（需手动封装单例）

Message 在 2.X 不支持 max，必须手动控制：

方案 1：全局封装单例 Message

import { Message } from 'element-ui';

let activeMessage = null;

export function showSingleMessage(options) {
  if (activeMessage) {
    activeMessage.close(); // 关闭旧消息
  }
  activeMessage = Message(options);
  
  // 监听关闭，防止内存泄漏
  const originalOnClose = options.onClose || (() => {});
  options.onClose = () => {
    originalOnClose();
    activeMessage = null;
  };
}

// 使用
showSingleMessage({ message: '操作成功', type: 'success' });

方案 2：Vue 原型挂载（全局调用）

// main.js
import { Message } from 'element-ui';

let currentMessage = null;

Vue.prototype.$singleMessage = (options) => {
  if (currentMessage) currentMessage.close();
  currentMessage = Message({
    ...options,
    onClose: () => {
      currentMessage = null;
      options.onClose?.();
    }
  });
};

// 组件内调用
this.$singleMessage({ message: '仅显示我', type: 'warning' });

适用场景：

• 需要全局控制 Message 唯一性
• 防止重复提交、错误堆叠

2. ElementUI 3.X（Element Plus）的优化

Element Plus（基于 Vue 3）对 Message 和 Notification 都支持 max 配置，使用更简单。

（1）全局配置 max

import { createApp } from 'vue';
import ElementPlus from 'element-plus';

const app = createApp(App);

app.use(ElementPlus, {
  // Message 配置
  message: {
    max: 1,  // 限制仅显示一个
  },
  // Notification 配置
  notification: {
    max: 1,
  },
});

优点：

• 一行配置解决单例问题
• 适用于 Message 和 Notification

（2）动态控制（高级用法）

如果某些场景需要 临时关闭单例限制，可以动态调整：

import { ElMessage } from 'element-plus';

// 临时允许多个 Message
ElMessage({ message: '提示 1', grouping: true }); // grouping 可堆叠
ElMessage({ message: '提示 2', grouping: true });

// 恢复单例模式
ElMessage({ message: '唯一提示', max: 1 });

3. 最佳实践总结

推荐方案：

• ElementUI 2.X：Notification 用 max，Message 手动封装单例
• Element Plus 3.X：直接全局配置 max: 1

4. 常见问题

Q1：为什么 Message 在 2.X 不支持 max？

ElementUI 2.X 的设计初衷是 轻量级提示，因此未加入 max 限制，需手动控制。

Q2：多个 Message 如何排队显示？

可以封装 消息队列，如：

const messageQueue = [];
let isShowing = false;

function showNextMessage() {
  if (messageQueue.length === 0 || isShowing) return;
  isShowing = true;
  const options = messageQueue.shift();
  Message({
    ...options,
    onClose: () => {
      isShowing = false;
      options.onClose?.();
      showNextMessage();
    }
  });
}

export function queueMessage(options) {
  messageQueue.push(options);
  showNextMessage();
}

关注我的微信公众号" 前端历险记"，获取更多前端开发干货！