50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ToastNotification（推送通知）
📅 我们继续 50 个小项目挑战！—— ToastNotification组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 Composition API（<script setup>）结合 TailwindCSS 创建一个带动画效果的通知提示组件（Toast）。该组件支持点击按钮显示通知，并会在 3 秒后自动消失。
🎯 组件目标
- 点击按钮时显示一条通知
- 每条通知独立显示并带有入场和出场动画
- 通知在 3 秒后自动消失
- 使用 Vue 响应式变量管理通知列表
- 使用 TailwindCSS 构建 UI 样式与动画
- 支持多个通知依次排列展示
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 <script setup> | 使用响应式变量管理通知列表 |
ref 响应式变量 | 控制通知数组 notifications 和自增 ID |
v-for 渲染通知列表 | 动态渲染每一条通知 |
setTimeout 定时器 | 控制通知自动消失时间 |
<transition-group> | 添加入场和出场动画 |
| TailwindCSS 动画类 | 实现平滑过渡效果 |
| TailwindCSS 布局类 | 设置通知容器位置和样式 |
🧱 组件实现
模板结构 <template>
<template><div class="flex h-screen items-center justify-center"><buttonclass="rounded-md bg-white px-4 py-2 font-mono text-black shadow hover:bg-gray-100"@click="showNotification">Show Notification</button><!-- 通知容器 --><div class="fixed right-4 bottom-4 flex flex-col items-end space-y-6"><transition-grouptag="div"enter-active-class="transition transform ease-out duration-300"enter-from-class="opacity-0 translate-y-6"enter-to-class="opacity-100 translate-y-0"leave-active-class="transition transform ease-in duration-300"leave-from-class="opacity-100 translate-y-0"leave-to-class="opacity-0 -translate-y-6"><divv-for="note in notifications":key="note.id"class="mt-4 min-w-[220px] rounded bg-white px-4 py-3 text-sm text-gray-800 shadow-lg ring-1 ring-gray-200">{{ note.text }}</div></transition-group></div></div>
</template>
脚本逻辑 <script setup>
<script setup>
import { ref } from 'vue'const notifications = ref([])
let idCounter = 0function showNotification() {const id = idCounter++notifications.value.push({id,text: `🔔 Notification #${id}`,})// 3 秒后自动移除setTimeout(() => {notifications.value = notifications.value.filter((n) => n.id !== id)}, 3000)
}
</script>
🔍 重点效果实现
✅ 动态通知列表管理
使用 ref 来维护通知列表：
const notifications = ref([])
let idCounter = 0
每次点击按钮都会生成一个新的通知对象，并赋予唯一的 id。
💡 自动隐藏通知
通过 setTimeout 在 3 秒后从列表中移除指定通知：
setTimeout(() => {notifications.value = notifications.value.filter((n) => n.id !== id)
}, 3000)
这样可以保证旧的通知不会堆积在页面上。
🎨 入场 & 出场动画
使用 <transition-group> 组件配合 TailwindCSS 的过渡类来实现动画效果：
<transition-grouptag="div"enter-active-class="transition transform ease-out duration-300"enter-from-class="opacity-0 translate-y-6"enter-to-class="opacity-100 translate-y-0"leave-active-class="transition transform ease-in duration-300"leave-from-class="opacity-100 translate-y-0"leave-to-class="opacity-0 -translate-y-6">
实现了：
- 入场：从透明向下移动到可视区域
- 出场：从可视区域向上淡出消失
视觉上非常自然流畅。
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
flex h-screen items-center justify-center | 居中按钮 |
fixed right-4 bottom-4 | 固定右下角定位通知容器 |
flex flex-col items-end | 右对齐排列通知 |
min-w-[220px], rounded, shadow-lg | 通知基础样式 |
text-sm, text-gray-800 | 文字颜色与大小 |
ring-1 ring-gray-200 | 添加浅色边框环 |
transition transform ease-out duration-300 | 过渡动画控制 |
opacity-0 translate-y-6 | 初始状态为透明并偏移下方 |
opacity-100 translate-y-0 | 显示状态为不透明并居中 |
这些 TailwindCSS 类帮助我们快速构建了一个美观、功能完整的通知组件。
📁 数据结构建议（可扩展）
你可以将通知数据结构封装成函数或服务模块，便于复用和测试：
// services/notification.js
export function createNotification(id, message = `🔔 Notification #${id}`) {return {id,text: message,}
}
并在组件中调用：
import { createNotification } from '@/services/notification'notifications.value.push(createNotification(idCounter++))
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 27,title: 'Toast Notification',image: 'https://50projects50days.com/img/projects-img/27-toast-notification.png',link: 'ToastNotification',},
router/index.js 中添加路由选项：
{path: '/ToastNotification',name: 'ToastNotification',component: () => import('@/projects/ToastNotification.vue'),},
🏁 总结
通知组件不仅实现了基本的提示功能，还展示了如何使用 Vue 的响应式能力和 <transition-group> 实现动画化的交互体验，用于展示操作反馈、错误提示或成功消息等。
你可以进一步扩展此组件的功能包括：
- ✅ 添加关闭按钮手动关闭通知
- ✅ 支持不同类型的提示（success / warning / error）
- ✅ 支持从底部弹出、顶部滑入等多种动画方向
- ✅ 封装为全局插件，如
app.use(NotificationPlugin) - ✅ 将组件封装为
<AppNotification />可复用组件
👉 下一篇，我们将完成Github Profiles组件，可以获取github个人信息并展示为卡片消息。🚀
感谢阅读，欢迎点赞、收藏和分享 😊