📅 我們繼續 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 類幫助我們快速構建了一個美觀、功能完整的通知組件。

---

📁 常量定義 + 組件路由

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

感謝閱讀，歡迎點贊、收藏和分享 😊