vue-vben-admin 消息中心实战3 步把顶部通知组件接进你的后台【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin周一上午十点运营在群里追问被驳回的那批审批单为什么没人收到提醒你翻了翻代码每个模块都在自己弹窗、自己 toast信息散得到处都是。vue-vben-admin 的消息中心就是为这种场景准备的——顶部导航栏那枚铃铛把公告、待办、审批提醒统一收进来集中接收、集中管理你不用再为每个模块单独做提醒。消息中心能帮你干什么先说三个你会真实遇到的场景。审批流。开发人员提交工单审批人铃铛上出现一条待审批消息处理完点一下已读。不用再去群里 人。发布公告。系统升级前推一条公告登录的用户看到红点有空再点开看。不打断当前操作也不遗漏。待办堆积。周报提醒、任务分派全部落在同一个列表里。太吵的时候一键全部标为已读或清空收场。注意这三个场景你都不用画界面。列表、红点、操作按钮组件里全有你只需要准备好数据。⚡ 3 分钟上手从铃铛点开到标完已读路径很短跟着走就行。打开你应用的布局文件官方 demo 在 basic.vue你自己的项目在 apps/ 目录下结构相同。从vben/layouts导入Notification组件。把它放进BasicLayout的#notification插槽传入消息数组。给数组造几条数据标题、摘要、时间、头像、已读状态。接好事件单条点击、标已读、删除、全部已读、清空、查看全部。保存刷新页面点右上角铃铛列表就展开了。把组件放进布局插槽六个事件一次接齐template #notification Notification :dotshowDot :notificationsnotifications clearhandleNoticeClear make-allhandleMakeAll read(item) item.id markRead(item.id) remove(item) item.id remove(item.id) on-clickhandleClick view-allviewAll / /template红点不会自动出现用一行 computed 算出来再传给dotconst showDot computed(() notifications.value.some((item) !item.isRead), );界面与交互逐个看入口、列表、操作区入口。铃铛按钮位于顶部导航栏最右侧。只要dot为 true图标右上角就有一颗红点。鼠标悬停在按钮上还会触发一段短促的摇铃动画算是给了点小反馈。列表。面板向下展开列表放在滚动容器里最大高度 360 像素超出就滚动。每条消息是头像、标题、两行摘要和时间。未读项右上角挂蓝点右侧多一个小按钮未读显示标为已读已读显示删除。数组为空时列表区显示暂无数据的空状态。操作区。面板右上角是全部标为已读列表为空时禁用。底部一行两个按钮左边清空通知删掉整份列表右边查看全部留给你跳完整的消息中心页面。 数据是怎么流转的字段速查表先记住一件事组件自己不存数据只接 props、只发事件。数据放哪由你决定。一条消息的字段定义在 types.ts速查如下字段类型说明idnumber / string消息标识标已读、删除都靠它titlestring标题列表里加粗显示messagestring内容摘要最多显示两行datestring时间文案相对时间或日期都行avatarstring发送者头像地址isReadboolean已读状态控制蓝点和小按钮linkstring可选路由路径或外链点击消息直达[key: string]any任意业务字段组件不关心接口本体很短前 7 行是核心最后一行给业务字段留了口子interface NotificationItem { id: number | string; avatar: string; date: string; isRead?: boolean; message: string; title: string; link?: string; [key: string]: any; }流转方向是单向的布局文件持有数组 → 组件渲染 → 用户操作触发事件 → 你在事件回调里改数组 → Vue 自动刷新视图。所以标已读、删除这些逻辑写在布局文件里组件里找不到。 二次开发三个方向类型扩展、实时推送、样式主题组件是纯展示层扩展点都留好了。① 类型扩展。给你的数据加一个type字段就能区分审批、系统、待办再在content插槽里按类型渲染不同图标notifications.value.push({ id: Date.now(), title: 有一条待审批, message: 报销单 #1024 等待处理, date: 刚刚, type: approval, avatar: https://example.com/a.png, });接口里有[key: string]: any兜底加字段不用改类型定义。② 实时推送。铃铛红点靠数据及时更新有 WebSocket 的话把收到的消息直接推进数组ws.onmessage (e) { const msg JSON.parse(e.data); notifications.value.unshift({ ...msg, isRead: false }); };数据一变红点、列表、未读标记全部自动刷新。③ 样式主题。摇铃动画就是组件 scoped 样式里一段 keyframes改面板宽度、换未读点颜色、关掉动画直接去 notification.vue 调:deep(.bell-button) { :hover { svg { animation: none; /* 关闭默认摇铃效果 */ } } }常见问题 FAQQ1数据有未读消息为什么红点不亮dot是父组件传的 prop不会自动读。写个 computed 检查数组里是否存在isRead为 false 的项把结果传进去。Q2点一条消息能直接跳详情页吗可以。给条目加link字段在on-click事件里处理路由路径走应用内跳转http(s) 链接新标签页打开。demo 文件里已经写好了现成实现照着搬。Q3消息数据有内置 Pinia store 吗没有。官方 demo 把列表当成布局文件里的 ref 管理。如果你希望多个组件读同一份数据把它挪进自己的 store 即可组件的 props 和事件接口不变。消息中心没有魔法它只是一份数据加一个展示组件铃铛是入口主动权一直在你手里。想再看一遍完整的布局接线方式参考 basic.vue 和官方文档 快速上手。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考