Vue3中打字機(jī)效果實(shí)現(xiàn)的技術(shù)完整指南
更新時(shí)間：2026年02月12日 08:53:36 作者：獨(dú)守一隅
在移動(dòng)設(shè)備上,為了提升用戶體驗(yàn),開發(fā)者會(huì)通過各種創(chuàng)意效果設(shè)計(jì)交互界面,下面這篇文章主要介紹了Vue3中打字機(jī)效果實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、效果簡(jiǎn)介
打字機(jī)效果是一種常見的頁(yè)面動(dòng)畫效果，它模擬了打字機(jī)逐字輸入的過程，為靜態(tài)頁(yè)面增添了動(dòng)態(tài)感和趣味性。在Vue 3中，我們可以通過組合式API、響應(yīng)式數(shù)據(jù)和定時(shí)器來實(shí)現(xiàn)這一效果。
二、實(shí)現(xiàn)原理
打字機(jī)效果的核心原理是：
- 逐字顯示：通過定時(shí)器逐個(gè)獲取文本字符并更新顯示
- 響應(yīng)式數(shù)據(jù)：利用Vue 3的響應(yīng)式系統(tǒng)實(shí)時(shí)更新界面
- 狀態(tài)控制：通過變量控制動(dòng)畫的開始、進(jìn)行和結(jié)束
三、基礎(chǔ)實(shí)現(xiàn)（單次顯示）
1. Vue組件模板
<template>
<!-- 標(biāo)題/標(biāo)語(yǔ)區(qū) -->
<div class="header">
<h1 class="main-title" style="min-height: 60px;">{{ typedTitle }}</h1>
<p class="sub-title">AI智能優(yōu)化，讓簡(jiǎn)歷閃閃發(fā)光</p>
</div>
</template>
2. Vue組件邏輯
<script setup>
import { ref, onMounted } from 'vue';
const typedTitle = ref('');
const fullTitle = '為你的工作經(jīng)歷畫龍點(diǎn)睛';
// 頁(yè)面加載完成后執(zhí)行
onMounted(() => {
typeWriter();
});
// 打字機(jī)效果函數(shù)
function typeWriter() {
let typedText = '';
let index = 0;
const typeInterval = setInterval(() => {
if (index < fullTitle.length) {
typedText += fullTitle.charAt(index);
typedTitle.value = typedText;
index++;
} else {
clearInterval(typeInterval);
}
}, 150); // 每個(gè)字符的間隔時(shí)間，單位毫秒
}
</script>
3. CSS樣式
<style scoped>
.main-title {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
line-height: 1.3;
}
.sub-title {
font-size: 18px;
color: #666;
margin: 0;
}
</style>
四、高級(jí)實(shí)現(xiàn)（循環(huán)展示）
1. 效果說明
循環(huán)展示的打字機(jī)效果包括以下階段：
- 打字階段：逐字顯示文本
- 停留階段：完整顯示后短暫停留
- 消失階段：逐字消失文本
- 等待階段：完全消失后短暫等待，然后重新開始
2. Vue組件實(shí)現(xiàn)
<template>
<!-- 標(biāo)題/標(biāo)語(yǔ)區(qū) -->
<div class="header">
<h1 class="main-title" style="min-height: 60px;">{{ typedTitle }}</h1>
<p class="sub-title">AI智能優(yōu)化，讓簡(jiǎn)歷閃閃發(fā)光</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const typedTitle = ref('');
const fullTitle = '為你的工作經(jīng)歷畫龍點(diǎn)睛';
// 頁(yè)面加載完成后執(zhí)行
onMounted(() => {
typeWriter();
});
// 打字機(jī)效果函數(shù) - 循環(huán)版
function typeWriter() {
let typedText = '';
let index = 0;
// 打字階段
const typeInterval = setInterval(() => {
if (index < fullTitle.length) {
typedText += fullTitle.charAt(index);
typedTitle.value = typedText;
index++;
} else {
clearInterval(typeInterval);
// 打字完成后，等待2秒開始消失
setTimeout(() => {
fadeOutTitle();
}, 2000);
}
}, 150); // 每個(gè)字符的間隔時(shí)間，單位毫秒
}
// 標(biāo)題淡出效果
function fadeOutTitle() {
let typedText = fullTitle;
let index = fullTitle.length - 1;
const fadeInterval = setInterval(() => {
if (index >= 0) {
typedText = typedText.substring(0, index);
typedTitle.value = typedText;
index--;
} else {
clearInterval(fadeInterval);
// 消失完成后，等待1秒重新開始
setTimeout(() => {
typeWriter();
}, 1000);
}
}, 100); // 每個(gè)字符的消失間隔時(shí)間，單位毫秒
}
</script>
<style scoped>
.main-title {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
line-height: 1.3;
}
.sub-title {
font-size: 18px;
color: #666;
margin: 0;
}
</style>
五、優(yōu)化建議
1. 性能優(yōu)化
- 合理設(shè)置定時(shí)器間隔：建議在100-200毫秒之間，過快會(huì)導(dǎo)致動(dòng)畫不流暢，過慢會(huì)影響用戶體驗(yàn)
- 及時(shí)清除定時(shí)器：使用
clearInterval確保定時(shí)器在完成后被清除，避免內(nèi)存泄漏 - 避免頻繁響應(yīng)式更新：雖然逐字更新需要多次更新響應(yīng)式數(shù)據(jù)，但Vue 3的響應(yīng)式系統(tǒng)已經(jīng)做了優(yōu)化
2. 用戶體驗(yàn)優(yōu)化
- 添加最小高度：為標(biāo)題容器添加
min-height，避免打字過程中頁(yè)面布局跳動(dòng) - 調(diào)整動(dòng)畫速度：根據(jù)文本長(zhǎng)度和場(chǎng)景調(diào)整打字速度，確保用戶有足夠時(shí)間閱讀
- 考慮不同場(chǎng)景：?jiǎn)未物@示適合重要標(biāo)題，循環(huán)顯示適合需要持續(xù)吸引注意力的場(chǎng)景
3. 擴(kuò)展功能
- 添加光標(biāo)效果：可以在打字過程中添加光標(biāo)閃爍效果，增強(qiáng)真實(shí)感
- 多文本切換：可以實(shí)現(xiàn)多個(gè)文本的循環(huán)切換顯示，豐富頁(yè)面內(nèi)容
- 響應(yīng)式調(diào)整：根據(jù)設(shè)備尺寸和屏幕方向調(diào)整字體大小和動(dòng)畫速度
- 封裝為可復(fù)用組件：將打字機(jī)效果封裝為獨(dú)立組件，方便在多個(gè)地方使用
六、應(yīng)用場(chǎng)景
打字機(jī)效果適用于以下場(chǎng)景：
- 頁(yè)面標(biāo)題：為頁(yè)面主標(biāo)題添加動(dòng)態(tài)效果，提升頁(yè)面吸引力
- 品牌標(biāo)語(yǔ)：突出展示品牌核心價(jià)值，增強(qiáng)記憶點(diǎn)
- 引導(dǎo)文本：引導(dǎo)用戶進(jìn)行下一步操作，提高轉(zhuǎn)化率
- 加載提示：在數(shù)據(jù)加載過程中顯示動(dòng)態(tài)提示，緩解用戶等待焦慮
七、代碼示例
以下是一個(gè)完整的Vue 3組件示例，包含了循環(huán)打字機(jī)效果的實(shí)現(xiàn)：
完整Vue組件
<template>
<div class="container">
<!-- 標(biāo)題/標(biāo)語(yǔ)區(qū) -->
<div class="header">
<h1 class="main-title" style="min-height: 60px;">{{ typedTitle }}</h1>
<p class="sub-title">AI智能優(yōu)化，讓簡(jiǎn)歷閃閃發(fā)光</p>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const typedTitle = ref('');
const fullTitle = '為你的工作經(jīng)歷畫龍點(diǎn)睛';
let typeInterval = null;
let fadeInterval = null;
// 頁(yè)面加載完成后執(zhí)行
onMounted(() => {
typeWriter();
});
// 組件卸載時(shí)清除定時(shí)器
onUnmounted(() => {
if (typeInterval) clearInterval(typeInterval);
if (fadeInterval) clearInterval(fadeInterval);
});
// 打字機(jī)效果函數(shù) - 循環(huán)版
function typeWriter() {
let typedText = '';
let index = 0;
// 打字階段
typeInterval = setInterval(() => {
if (index < fullTitle.length) {
typedText += fullTitle.charAt(index);
typedTitle.value = typedText;
index++;
} else {
clearInterval(typeInterval);
// 打字完成后，等待2秒開始消失
setTimeout(() => {
fadeOutTitle();
}, 2000);
}
}, 150); // 每個(gè)字符的間隔時(shí)間，單位毫秒
}
// 標(biāo)題淡出效果
function fadeOutTitle() {
let typedText = fullTitle;
let index = fullTitle.length - 1;
fadeInterval = setInterval(() => {
if (index >= 0) {
typedText = typedText.substring(0, index);
typedTitle.value = typedText;
index--;
} else {
clearInterval(fadeInterval);
// 消失完成后，等待1秒重新開始
setTimeout(() => {
typeWriter();
}, 1000);
}
}, 100); // 每個(gè)字符的消失間隔時(shí)間，單位毫秒
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
padding: 40px 30px 60px;
min-height: 100vh;
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}
.header {
text-align: center;
margin-bottom: 60px;
}
.main-title {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
line-height: 1.3;
}
.sub-title {
font-size: 18px;
color: #666;
margin: 0;
}
</style>
封裝為可復(fù)用組件
如果需要在多個(gè)地方使用打字機(jī)效果，可以將其封裝為一個(gè)可復(fù)用的組件：
<template>
<div class="typewriter-container">
<slot :text="typedText">{{ typedText }}</slot>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
text: {
type: String,
default: '為你的工作經(jīng)歷畫龍點(diǎn)睛'
},
speed: {
type: Number,
default: 150
},
loop: {
type: Boolean,
default: false
},
delay: {
type: Number,
default: 2000
}
});
const typedText = ref('');
let typeInterval = null;
let fadeInterval = null;
// 監(jiān)聽文本變化
watch(() => props.text, () => {
if (typeInterval) clearInterval(typeInterval);
if (fadeInterval) clearInterval(fadeInterval);
typedText.value = '';
typeWriter();
});
// 頁(yè)面加載完成后執(zhí)行
onMounted(() => {
typeWriter();
});
// 組件卸載時(shí)清除定時(shí)器
onUnmounted(() => {
if (typeInterval) clearInterval(typeInterval);
if (fadeInterval) clearInterval(fadeInterval);
});
// 打字機(jī)效果函數(shù)
function typeWriter() {
let text = '';
let index = 0;
// 打字階段
typeInterval = setInterval(() => {
if (index < props.text.length) {
text += props.text.charAt(index);
typedText.value = text;
index++;
} else {
clearInterval(typeInterval);
if (props.loop) {
// 打字完成后，等待指定時(shí)間開始消失
setTimeout(() => {
fadeOutTitle();
}, props.delay);
}
}
}, props.speed);
}
// 標(biāo)題淡出效果
function fadeOutTitle() {
let text = props.text;
let index = props.text.length - 1;
fadeInterval = setInterval(() => {
if (index >= 0) {
text = text.substring(0, index);
typedText.value = text;
index--;
} else {
clearInterval(fadeInterval);
// 消失完成后，等待1秒重新開始
setTimeout(() => {
typeWriter();
}, 1000);
}
}, props.speed * 0.6); // 消失速度稍快
}
</script>
<style scoped>
.typewriter-container {
/* 可根據(jù)需要添加樣式 */
}
</style>
使用示例：
<template>
<div class="container">
<h1 class="main-title" style="min-height: 60px;">
<Typewriter
text="為你的工作經(jīng)歷畫龍點(diǎn)睛"
:loop="true"
:speed="150"
/>
</h1>
<p class="sub-title">AI智能優(yōu)化，讓簡(jiǎn)歷閃閃發(fā)光</p>
</div>
</template>
<script setup>
import Typewriter from './components/Typewriter.vue';
</script>
八、總結(jié)
打字機(jī)效果是一種簡(jiǎn)單但有效的頁(yè)面動(dòng)畫技術(shù)，通過JavaScript定時(shí)器和小程序的數(shù)據(jù)綁定機(jī)制，我們可以輕松實(shí)現(xiàn)這一效果。無論是單次顯示還是循環(huán)展示，都可以為頁(yè)面增添動(dòng)態(tài)感和趣味性，提升用戶體驗(yàn)。
在實(shí)現(xiàn)過程中，我們需要注意性能優(yōu)化和用戶體驗(yàn)，合理設(shè)置動(dòng)畫參數(shù)，確保效果流暢自然。同時(shí)，我們也可以根據(jù)具體場(chǎng)景進(jìn)行擴(kuò)展和定制，創(chuàng)造出更加豐富多樣的動(dòng)態(tài)效果。
到此這篇關(guān)于Vue3中打字機(jī)效果實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3打字機(jī)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)
這篇文章主要介紹了vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue.js是一個(gè)流行的前端JavaScript框架,用于構(gòu)建用戶界面和單頁(yè)應(yīng)用,這篇文章主要給大家介紹了關(guān)于VUE3常見面試題總結(jié)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue更多篩選項(xiàng)小組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue自定義組件插入到body中的實(shí)現(xiàn)方式
文章介紹了如何在Vue中創(chuàng)建一個(gè)自定義的notice提醒組件,并將其插入到body中,該組件通過調(diào)用`show`方法顯示,調(diào)用`remove`方法銷毀,主要步驟包括創(chuàng)建組件、使用render函數(shù)加載、$mount掛載并插入到body中2025-12-12
vue-axios同時(shí)請(qǐng)求多個(gè)接口 等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時(shí)請(qǐng)求多個(gè)接口 等所有接口全部加載完成再處理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue前端路由以及vue-router兩種模式實(shí)例詳解
路由這個(gè)概念最先是后端出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue前端路由以及vue-router兩種模式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
下面小編就為大家分享一篇快速處理vue渲染前的顯示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題
這篇文章主要介紹了簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue封裝組件之上傳圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10