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