vue3-element-admin 消息提示实战：ElMessage 与 Notification 中心完整拆解

vue3-element-admin 消息提示实战：ElMessage 与 Notification 中心完整拆解

【免费下载链接】vue3-element-admin🔥基于 Vue 3 + Vite 7+ TypeScript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin

表单提交后页面顶部飘出"删除成功"，发布公告后导航栏的铃铛旁多了颗小红点——vue3-element-admin 的消息提示体系，就是由这一组反馈机制支撑起来的。读完这篇，你能分清新增操作反馈该走哪条通道，也能把"后端推一条公告到浏览器右下角"的实时链路完整看懂。

能力地图：四种通道，各管一摊

系统里的消息提示不是一个组件，而是四条通道，分工如下：

前三者都是 Element Plus 内置组件，ElMessage 是 Element Plus Message 用法里出镜率最高的成员，也是最轻的那个；Notification 中心则是仓库自研的组合，挂在顶部导航栏，入口组件是 src/components/NoticeCenter/index.vue，列表、角标、已读这些业务逻辑收在 src/components/NoticeCenter/useNotice.ts。

⚡ 3 行代码接入 ElMessage：不打断人的即时反馈

当"操作完成、或操作被拦住、一句话能说清"的时候，用 ElMessage。它不需要点击、不阻塞页面，默认 3 秒后自动消失。用户管理里的删除流程是最典型的用法，四种类型各出现一次：

源码：src/views/system/user/index.vue

ElMessage.success("删除成功"); ElMessage.error("不能删除当前登录用户"); ElMessage.warning("请勾选删除项"); ElMessage.info("已取消删除");

把这四句连起来读就是一条完整的操作链：用户没勾选任何行就点删除，warning 先提示勾选；勾选里包含自己的账号，error 直接拦下并说明原因；请求成功，success 给出确认；在确认框点了取消，info 补一个中性回执。每一步一句话，页面始终不被占据。

特性可以概括为四句：自动 3 秒消失、顶部居中显示、不打断当前操作、success / error / warning / info 四种类型。这里有个小坑：同一个操作如果经过多个节点都会弹提示，别每个节点都弹，挑最关键的一个节点说，否则一屏会叠出一串气泡。

🔔 从后端到浏览器：一条通知的旅程

通知中心的入口就是导航栏那枚铃铛。未读时铃铛旁有脉冲红点，展开后是未读 / 已读两个 Tab 加最近 5 条列表，点任意一条，详情弹窗渲染完整正文，对应 NoticeDetailDialog 组件。

实时推送这条链路，很多项目会用 WebSocket + STOMP（STOMP 可以理解为跑在 WebSocket 之上的消息订阅协议）来做 WebSocket 实时通知；这个项目选的是 SSE（Server-Sent Events），白话讲就是服务端向浏览器开的一条单向通道，前端只管收。连接封装在 src/utils/sse.ts，带心跳、指数退避重连和令牌刷新逻辑。

后端发公告的那一刻

公告发布后，消息会走这样一条路径：SSE 收到 notice 事件 → 列表头部插入并截断到 5 条 → 未读角标加一 → 右下角弹 ElNotification。订阅代码（节选）：

源码：src/components/NoticeCenter/useNotice.ts

const stopNotice = on<NoticeMessage>(SseTopics.NOTICE, (data) => { if (!data.id) return; unreadTotal.value += 1; list.value.unshift({ id: data.id, title: data.title, type: data.type, isRead: 0 }); ElNotification({ title: "您收到一条新的通知消息！", message: data.title, position: "bottom-right", }); });

同一份逻辑还处理撤回：后端发出 notice-revoke 事件后，前端按 id 把那条从列表移除，若原本未读，角标同步减一。

点开已读，角标清零

用户点列表里的某条通知，或点"全部已读"，列表与角标会按下面这套逻辑更新：

源码：src/components/NoticeCenter/useNotice.ts

async function readAll() { if (unreadTotal.value <= 0) return; await NoticeAPI.readAll(); unreadTotal.value = 0; list.value = []; ElMessage.success("已全部标记为已读"); }

会发现处理完一条未读后，红点角标已经减了 1——这就是"入列表 → 弹角标 → 点开详情"三拍的闭环。界面组成可以拆成三块：

• 铃铛图标 + 红点脉冲动画
• 下拉面板：未读/已读 Tab，底部"查看更多/全部已读"
• 详情弹窗渲染通知完整正文

📌 怎么选、怎么搭配

四条通道不是重复建设，责任边界很清楚：

数据来源是隐藏的分界线：前三条由前端主动触发，最后一条来自后台推送与数据库。

用户管理的删除流程是一条典型的 ElMessage + ElMessageBox 接力（节选）：

源码：src/views/system/user/index.vue

if (!userIds) { ElMessage.warning("请勾选删除项"); return; } await ElMessageBox.confirm("确认删除选中的用户吗？", "警告", { type: "warning" }); await UserAPI.deleteByIds(userIds); ElMessage.success("删除成功");

用户点取消时，confirm 的 Promise 会 reject，被 catch 接住换成 ElMessage.info("已取消删除")，给一个温和的回执。公告链路则反着走：后端推送 → ElNotification 角标 → 列表沉淀 → 点开标记已读。前者是"对行为的反馈"，后者是"对事件的推送"，两者不重叠。

避坑清单

• 短时间多条 Message 建议合并文案
• 未读数超过 99 展示 "99+"
• 非关键通知设 showClose: false
• SSE 防重：unshift 前查重
• 组件卸载时解绑全部订阅

SSE 的指数退避重连、连接被拒时先刷令牌再重连，完整逻辑都在 src/utils/sse.ts，notice-revoke 撤回事件也值得顺着这条线一起读完。

【免费下载链接】vue3-element-admin🔥基于 Vue 3 + Vite 7+ TypeScript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin