ElementUI 提示框單例控制：從 2.x 到 3.x 的完整解決方案
作者：天藍(lán)色的魚
本文將深入探討 ElementUI 2.x 和 3.x 如何實(shí)現(xiàn) 單例提示框，并提供優(yōu)秀實(shí)踐方案。
在前端開發(fā)中，ElementUI 的 Message（消息提示） 和 Notification（通知框） 是高頻使用的組件。但在某些場景下，我們不希望它們 同時(shí)彈出多個(gè)，比如：
- 表單提交，防止重復(fù)提示
- 全局錯(cuò)誤攔截，避免堆疊報(bào)錯(cuò)
- 關(guān)鍵操作反饋，確保用戶不被干擾
本文將深入探討 ElementUI 2.x 和 3.x 如何實(shí)現(xiàn) 單例提示框，并提供 最佳實(shí)踐方案。
一、 ElementUI 2.x 的解決方案
2.x 版本對(duì) Message 和 Notification 的支持不同，需分別處理。
1. Notification（支持 max 配置）
Notification 在 2.X 版本支持全局 max 配置，可限制最大顯示數(shù)量：
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.use(ElementUI, {
notification: {
max: 1, // 同一時(shí)間只顯示一個(gè)
offset: 20, // 位置偏移
duration: 3000 // 自動(dòng)關(guān)閉時(shí)間
}
});優(yōu)點(diǎn)：
- 配置簡單，無需額外代碼
- 自動(dòng)關(guān)閉舊彈窗，確保唯一性
缺點(diǎn)：? 僅適用于 Notification，Message 不支持
2. Message（需手動(dòng)封裝單例）
Message 在 2.x **不支持 max**，必須手動(dòng)控制：
方案 1：全局封裝單例 Message
import { Message } from'element-ui';
let activeMessage = null;
exportfunction showSingleMessage(options) {
if (activeMessage) {
activeMessage.close(); // 關(guān)閉舊消息
}
activeMessage = Message(options);
// 監(jiān)聽關(guān)閉，防止內(nèi)存泄漏
const originalOnClose = options.onClose || (() => {});
options.onClose = () => {
originalOnClose();
activeMessage = null;
};
}
// 使用
showSingleMessage({ message: '操作成功', type: 'success' });方案 2：Vue 原型掛載（全局調(diào)用）
// 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?.();
}
});
};
// 組件內(nèi)調(diào)用
this.$singleMessage({ message: '僅顯示我', type: 'warning' });適用場景：
- 需要全局控制 Message 唯一性
- 防止重復(fù)提交、錯(cuò)誤堆疊
二、ElementUI 3.x（Element Plus）的優(yōu)化
Element Plus（基于 Vue 3）對(duì) 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, // 限制僅顯示一個(gè)
},
// Notification 配置
notification: {
max: 1,
},
});優(yōu)點(diǎn)：
- 一行配置解決單例問題
- 適用于 Message 和 Notification
2. 動(dòng)態(tài)控制（高級(jí)用法）
如果某些場景需要 臨時(shí)關(guān)閉單例限制，可以動(dòng)態(tài)調(diào)整：
import { ElMessage } from 'element-plus';
// 臨時(shí)允許多個(gè) Message
ElMessage({ message: '提示 1', grouping: true }); // grouping 可堆疊
ElMessage({ message: '提示 2', grouping: true });
// 恢復(fù)單例模式
ElMessage({ message: '唯一提示', max: 1 });三、最佳實(shí)踐總結(jié)
方案 | ElementUI 2.X | Element Plus 3.X |
Notification 單例 |
（全局配置） |
（全局配置） |
Message 單例 | 手動(dòng)封裝單例 |
（全局配置） |
動(dòng)態(tài)控制 | 需手動(dòng)管理 | 支持 |
推薦方案：
- ElementUI 2.X：Notification 用 max，Message 手動(dòng)封裝單例
- Element Plus 3.X：直接全局配置 max: 1
四、常見問題
多個(gè) Message 如何排隊(duì)顯示？
可以封裝 消息隊(duì)列，如：
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();
}責(zé)任編輯：趙寧寧
來源：
前端歷險(xiǎn)記
