📅 我們繼續 50 個小項目挑戰！—— AutoTextEffect組件

倉庫地址：https://github.com/SunACong/50-vue-projects

項目預覽地址：https://50-vue-projects.vercel.app/。

---

利用 Vue 3 的 Composition API 和一些簡單的 CSS 動畫來構建一個動態的打字機效果。這個效果不僅能夠逐個字符地顯示文本，還能模擬刪除操作，為用戶帶來更豐富的視覺體驗。

🎯 組件目標

• 實現逐字顯現文本的打字機效果
• 支持調節打字速度
• 模擬刪除操作，增加互動性
• 使用 Vue 3 Composition API 管理狀態與生命周期

---

?? 技術實現點

技術點	描述
Vue 3 <script setup>	利用響應式變量管理顯示文本、速度等狀態
ref 響應式引用	控制顯示文本、是否刪除狀態和定時器ID
生命周期鉤子 (onMounted, onUnmounted)	自動啟動/清理動畫邏輯
watch 監聽器	實時響應打字速度變化
CSS 動畫	實現光標閃爍效果

---

🧱 組件實現

模板結構 <template>

<template><div class="flex min-h-screen flex-col items-center justify-center bg-gray-900 text-white"><div class="min-h-[3rem] p-4 text-center text-2xl font-bold">{{ displayedText }}<span class="inline-block w-[1ch] animate-ping align-bottom">|</span></div><div class="mt-8 flex flex-col items-center"><label for="speed" class="mb-2 text-lg">調節打字速度</label><input id="speed" type="range" min="50" max="500" v-model="speed" class="w-64" /><span class="mt-2">速度: {{ speed }}ms</span></div></div>
</template>

此模板包括一個用于顯示打字機效果的區域和一個滑塊控件，允許用戶調整打字速度。

腳本邏輯 <script setup>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'const fullText = '這是一個打字機效果示例，字母或漢字會一個個顯示！'
const displayedText = ref('')
const speed = ref(150)const isDeleting = ref(false)
let timeoutId = null
let index = 0const typeLoop = () => {const current = fullText.slice(0, index)displayedText.value = currentif (!isDeleting.value) {if (index < fullText.length) {index++timeoutId = setTimeout(typeLoop, speed.value)} else {isDeleting.value = truetimeoutId = setTimeout(typeLoop, 1000) // 停頓后開始刪除}} else {if (index > 0) {index--timeoutId = setTimeout(typeLoop, speed.value)} else {isDeleting.value = falsetimeoutId = setTimeout(typeLoop, 500) // 停頓后重新打字}}
}onMounted(() => {typeLoop()
})onUnmounted(() => {if (timeoutId) clearTimeout(timeoutId)
})watch(speed, (newSpeed) => {// 每次變速立即影響后續節奏if (timeoutId) {clearTimeout(timeoutId)timeoutId = setTimeout(typeLoop, newSpeed)}
})
</script>

這段腳本實現了核心邏輯，包括：

• 初始化狀態和設置默認值
• 定義打字循環函數 typeLoop
• 使用 onMounted 和 onUnmounted 來控制動畫的啟動與清理
• 使用 watch 來監聽并即時響應打字速度的變化

---

🔍 關鍵功能解析

? 打字機邏輯

typeLoop 函數負責處理文本的顯示和刪除過程。它首先獲取當前要顯示的文本片段，然后根據是否處于“刪除”模式決定是添加還是移除字符。此外，該函數還引入了短暫的停頓時間，以模擬真實的打字體驗。

💡 動態調整速度

通過綁定到輸入范圍控件的 v-model，我們可以實時調整打字速度。一旦速度發生變化，watch 監聽器會立即取消當前計時器，并根據新的速度重新啟動打字循環。

🎨 光標閃爍效果

利用 TailwindCSS 的 animate-ping 類，我們可以輕松實現一個閃爍的光標效果，進一步提升用戶體驗。

---

🎨 TailwindCSS 樣式重點講解

類名	作用
flex, min-h-screen, flex-col, items-center, justify-center	使用 Flexbox 創建一個全屏垂直居中的布局
bg-gray-900	設置背景顏色為深灰色，增加對比度和視覺層次感
text-white	設置文字顏色為白色，確保在深色背景下清晰可見
min-h-[3rem], p-4, text-center, text-2xl, font-bold	控制文本顯示區域的高度、內邊距、文本對齊方式、字體大小及加粗效果
inline-block, w-[1ch], animate-ping, align-bottom	實現光標的樣式設置，包括寬度（字符單位）、動畫效果以及垂直對齊
mt-8, flex, flex-col, items-center	調整輸入范圍控件和其他元素的外邊距、使用Flexbox進行布局，并使其內容居中對齊
mb-2, text-lg	為標簽提供下邊距和字體大小
w-64	設置滑動條的最大寬度
mt-2	給速度顯示文本添加上邊距

---

📁 常量定義 + 組件路由

constants/index.js 添加組件預覽常量：

{id: 30,title: 'Auto Text Effect',image: 'https://50projects50days.com/img/projects-img/30-auto-text-effect.png',link: 'AutoTextEffect',},

router/index.js 中添加路由選項：

{path: '/AutoTextEffect',name: 'AutoTextEffect',component: () => import('@/projects/AutoTextEffect.vue'),},

---

🏁 總結

使用 Vue 3 的 Composition API 結合 TailwindCSS 創建一個具有交互性的打字機效果。

擴展基礎的打字機效果：

• ? 提供一個文本框讓用戶自行輸入想要展示的文字。
• ? 字符顏色漸變
• ? 背景閃爍
• ? 添加粒子爆炸或其他動畫效果

---

👉 下一篇，我們將完成PasswordGenerator組件，一個密碼生成器組件，可以對生成的密碼進行配置、復制。🚀

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