📅 我们继续 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 = 0

const typeLoop = () => {
    const current = fullText.slice(0, index)
    displayedText.value = current

    if (!isDeleting.value) {
        if (index < fullText.length) {
            index++
            timeoutId = setTimeout(typeLoop, speed.value)
        } else {
            isDeleting.value = true
            timeoutId = setTimeout(typeLoop, 1000) // 停顿后开始删除
        }
    } else {
        if (index > 0) {
            index--
            timeoutId = setTimeout(typeLoop, speed.value)
        } else {
            isDeleting.value = false
            timeoutId = 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组件，一个密码生成器组件，可以对生成的密码进行配置、复制。🚀

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