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">
        <button
            class="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-group
                tag="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">
                <div
                    v-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 = 0

function 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-group
    tag="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 类帮助我们快速构建了一个美观、功能完整的通知组件。

---

📁 常量定义 + 组件路由

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个人信息并展示为卡片消息。🚀

感谢阅读，欢迎点赞、收藏和分享 😊