vue3-element-admin消息提示：Message与Notification
项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin 在后台管理系统中，消息提示是提升用户体验的重要组件。vue3-element-admin基于Element Plus提供了两种核心消息机制：轻量级的Message（消息提示）和持久化的Notification（通知）。本文将详细介绍这两种组件的使用场景与实现方式。
消息提示系统概览
vue3-element-admin的消息提示系统分为两类：
- 操作反馈：通过
ElMessage实现，用于表单提交、按钮点击等操作结果的即时反馈 - 系统通知：通过
Notification组件实现，用于接收后台推送的公告、任务提醒等重要信息
组件文件结构
ElMessage：轻量级操作反馈
ElMessage是Element Plus提供的轻量级消息提示组件，适用于操作成功、失败、警告等场景的即时反馈。在vue3-element-admin中，该组件被广泛应用于各类表单提交和数据操作。
基础使用方式
// 成功提示
ElMessage.success("密码重置成功，新密码是：" + value);
// 错误提示
ElMessage.error("两次输入的密码不一致");
// 警告提示
ElMessage.warning("密码至少需要6位字符，请重新输入");
典型应用场景
在用户管理模块中，重置密码操作使用了多种消息提示类型： src/views/system/user/index.vue
// 密码长度验证
ElMessage.warning("密码至少需要6位字符，请重新输入");
// 操作成功反馈
ElMessage.success("密码重置成功，新密码是：" + value);
// 取消操作提示
ElMessage.info("已取消重置密码");
组件特点
- 自动消失（默认3秒）
- 顶部居中显示
- 不打断用户当前操作
- 支持success/error/warning/info四种类型
Notification：持久化系统通知
Notification组件用于展示需要用户明确关注的系统通知，如公告发布、任务分配等重要信息。该组件在系统顶部导航栏以铃铛图标形式呈现，支持实时推送和历史消息查看。
组件实现架构
src/components/Notification/index.vue实现了完整的通知中心功能，包括：
- 未读消息数量 badge 提示
- 通知列表下拉面板
- 通知详情弹窗
- WebSocket实时消息接收
核心功能代码
1. 通知消息订阅
import { useStomp } from "@/composables/websocket/useStomp";
const { subscribe, unsubscribe, isConnected } = useStomp();
watch(
() => isConnected.value,
(connected) => {
if (connected) {
subscribe("/user/queue/message", (message: any) => {
console.log("收到通知消息：", message);
const data = JSON.parse(message.body);
// 添加新通知到列表
noticeList.value.unshift({
id: data.id,
title: data.title,
type: data.type,
publishTime: data.publishTime,
});
// 显示通知提示
ElNotification({
title: "您收到一条新的通知消息！",
message: data.title,
type: "success",
position: "bottom-right",
});
});
}
}
);
2. 通知操作处理
// 阅读通知
function handleReadNotice(id: string) {
NoticeAPI.getDetail(id).then((data) => {
noticeDialogVisible.value = true;
noticeDetail.value = data;
// 从列表移除已读通知
const index = noticeList.value.findIndex((notice) => notice.id === id);
if (index >= 0) {
noticeList.value.splice(index, 1);
}
});
}
// 全部已读
function handleMarkAllAsRead() {
NoticeAPI.readAll().then(() => {
noticeList.value = [];
});
}
通知中心界面组成
-
通知入口：导航栏铃铛图标，带未读数量提示
<el-badge v-if="noticeList.length > 0" :value="noticeList.length" :max="99"> <div class="i-svg:bell" /> </el-badge> -
通知列表：下拉面板展示最近5条未读通知
<div v-for="(item, index) in noticeList" :key="index" class="w-500px py-3"> <div class="flex-y-center"> <DictLabel v-model="item.type" code="notice_type" size="small" /> <el-text size="small" class="w-200px cursor-pointer !ml-2 !flex-1" truncated> {{ item.title }} </el-text> <div class="text-xs text-gray">{{ item.publishTime }}</div> </div> </div> -
通知详情：弹窗展示完整通知内容
<el-dialog v-model="noticeDialogVisible" :title="noticeDetail?.title"> <div class="max-h-60vh overflow-y-auto"> <div v-html="noticeDetail.content"></div> </div> </el-dialog>
实时消息推送
系统通过WebSocket实现通知的实时推送，使用STOMP协议与后端建立连接： src/composables/websocket/useStomp.ts
实战应用对比
| 特性 | ElMessage | Notification |
|---|---|---|
| 用途 | 操作结果反馈 | 系统重要通知 |
| 生命周期 | 自动消失 | 手动关闭 |
| 位置 | 顶部居中 | 右上角/下拉面板 |
| 交互性 | 无 | 可点击查看详情 |
| 数据来源 | 前端触发 | 后端推送/数据库 |
| 典型场景 | 表单提交成功 | 新公告发布 |
组合使用示例
在字典管理模块中，两种消息提示配合使用： src/views/system/dict/index.vue
// 表单提交成功 - 使用ElMessage
ElMessage.success("修改成功");
// 批量删除确认 - 使用MessageBox+ElMessage
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
// 操作成功
ElMessage.success("删除成功");
}).catch(() => {
// 取消操作
ElMessage.info("已取消删除");
});
总结与最佳实践
消息提示使用原则
- 操作反馈用Message：表单提交、按钮点击等即时操作结果
- 重要通知用Notification：需要用户了解的系统公告、任务提醒
- 复杂交互用MessageBox：需要用户确认的危险操作
- 状态变化用NotificationBadge：未读消息、新邮件等数量提示
性能优化建议
- 避免短时间内触发多条Message，可合并相似操作的反馈
- 非关键通知可设置
showClose: false减少干扰 - 大量通知时使用分页加载，参考src/components/Notification/index.vue中的分页实现
通过合理使用这两种消息提示组件，可以显著提升系统的用户体验，让用户清晰了解操作结果和系统动态，同时避免不必要的干扰。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
