📅 我們繼續 50 個小項目挑戰！—— IncrementingCounter組件
倉庫地址：https://github.com/SunACong/50-vue-projects
項目預覽地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 Composition API 和 <script setup> 語法結合 TailwindCSS 構建一個帶有數字增長動畫效果的統計卡片組件。該組件常用于展示社交媒體粉絲數、網站訪問量、銷售數據等可視化指標。
🎯 組件目標
- 展示多個統計數據項（如 Twitter 關注者、YouTube 訂閱數等）。
- 數字從
0動態增長到指定目標值。 - 使用圖標與文字搭配提升視覺識別度。
- 使用 TailwindCSS 快速構建現代 UI 界面。
- 添加生命周期控制防止內存泄漏。
?? 技術實現點
| 技術點 | 描述 |
|---|---|
Vue 3 Composition API (<script setup>) | 使用響應式變量管理組件狀態 |
reactive() 響應式數組 | 存儲并更新多個統計項數據 |
onMounted 生命周期鉤子 | 在組件掛載后啟動動畫 |
setInterval 定時器 | 控制數字逐步遞增的過程 |
clearInterval | 避免內存泄漏，在組件卸載時清除定時器 |
| TailwindCSS 布局與樣式 | 快速構建美觀的統計卡片界面 |
🧱 組件實現
模板結構 <template>
<template><div class="flex h-screen items-center justify-center gap-20 text-white"><divclass="flex flex-col items-center justify-center gap-2"v-for="item in iconList":key="item.id"><img :src="item.icon" alt="icon" class="h-20 w-20" /><div class="text-3xl font-extrabold">{{ item.count }}</div><div class="font-mono">{{ item.name }}</div></div></div>
</template>
腳本邏輯 <script setup>
<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue'const iconList = reactive([{id: 1,name: 'Twitter Followers',count: 0,icon: '/src/assets/icon/推特.svg',target: 12000,},{id: 2,name: 'Facebook Fans',count: 0,icon: '/src/assets/icon/facebook.svg',target: 5000,},{id: 3,name: 'YouTube Subscribers',count: 0,icon: '/src/assets/icon/油管.svg',target: 7000,},
])onMounted(() => {const totalSteps = 100 // 總步數const intervalDuration = 10 // 每次間隔時間（毫秒）let currentStep = 0const interval = setInterval(() => {currentStep++iconList.forEach((item) => {const stepValue = Math.ceil(item.target / totalSteps) // 每步增長的值item.count = Math.min(item.count + stepValue, item.target) // 確保不超過目標值})if (currentStep >= totalSteps) {clearInterval(interval)}}, intervalDuration)onUnmounted(() => {clearInterval(interval)})
})
</script>
🔍 重點效果實現
? 數字增長動畫原理
通過 setInterval 設置了一個定時器，每 10ms 執行一次：
iconList.forEach((item) => {const stepValue = Math.ceil(item.target / totalSteps)item.count = Math.min(item.count + stepValue, item.target)
})
- 將目標值平均分成
totalSteps步； - 每次增加一步的數值；
- 最終達到目標值，并停止計時器。
這樣就能實現一個平滑的數字增長動畫。
💡 組件卸載清理機制
為避免內存泄漏，我們在 onUnmounted 中調用 clearInterval：
onUnmounted(() => {clearInterval(interval)
})
確保組件卸載時自動清除定時器。
🎨 TailwindCSS 樣式重點講解
| 類名 | 作用 |
|---|---|
flex, items-center, justify-center | 居中布局整個容器 |
h-screen | 高度為視口全高 |
gap-20 | 元素之間間距為 5rem |
flex-col | 設置為縱向排列 |
h-20, w-20 | 圖標大小為 5rem × 5rem |
text-3xl | 字體大小為 1.875rem |
font-extrabold | 加粗字體 |
font-mono | 使用等寬字體 |
text-white | 設置文字顏色為白色 |
這些 Tailwind 工具類幫助我們快速構建了一個視覺清晰、層次分明的統計信息展示區域。
📁 常量定義 + 組件路由
? 常量定義（可選）
constants/index.js 添加組件預覽常量：
{id: 15,title: 'Incrementing Counter',image: 'https://50projects50days.com/img/projects-img/15-incrementing-counter.png',link: 'IncrementingCounter',},
router/index.js 中添加路由選項：
{path: '/IncrementingCounter',name: 'IncrementingCounter',component: () => import('@/projects/IncrementingCounter.vue'),}
🏁 總結
數據統計卡片組件涵蓋了Vue 3 的響應式系統、定時器控制、生命周期管理和 TailwindCSS 的靈活樣式組合。
👉 下一篇，我們將完成DrinkWater組件，一個交互式的喝水記錄以及達成目標的組件，具有絲滑的交互動畫！🚀
實操)
