ElementUI 提示框單例控制：從 2.x 到 3.x 的完整解決方案
作者：天藍色的魚
本文將深入探討 ElementUI 2.x 和 3.x 如何實現 單例提示框，并提供優秀實踐方案。
在前端開發中，ElementUI 的 Message（消息提示） 和 Notification（通知框） 是高頻使用的組件。但在某些場景下，我們不希望它們 同時彈出多個，比如：
- 表單提交，防止重復提示
- 全局錯誤攔截，避免堆疊報錯
- 關鍵操作反饋，確保用戶不被干擾
本文將深入探討 ElementUI 2.x 和 3.x 如何實現 單例提示框，并提供 最佳實踐方案。
一、 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;
exportfunction 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 唯一性
- 防止重復提交、錯誤堆疊
二、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 });三、最佳實踐總結
方案 | ElementUI 2.X | Element Plus 3.X |
Notification 單例 |
（全局配置） |
（全局配置） |
Message 單例 | 手動封裝單例 |
（全局配置） |
動態控制 | 需手動管理 | 支持 |
推薦方案：
- ElementUI 2.X：Notification 用 max，Message 手動封裝單例
- Element Plus 3.X：直接全局配置 max: 1
四、常見問題
多個 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();
}
});
}
exportfunction queueMessage(options) {
messageQueue.push(options);
showNextMessage();
}責任編輯：趙寧寧
來源：
前端歷險記
