Vue3中打字机效果实现的技术完整指南

更新时间：2026年02月12日 08:53:36 作者：独守一隅

在移动设备上,为了提升用户体验,开发者会通过各种创意效果设计交互界面,下面这篇文章主要介绍了Vue3中打字机效果实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、效果简介

打字机效果是一种常见的页面动画效果，它模拟了打字机逐字输入的过程，为静态页面增添了动态感和趣味性。在Vue 3中，我们可以通过组合式API、响应式数据和定时器来实现这一效果。

二、实现原理

打字机效果的核心原理是：

逐字显示：通过定时器逐个获取文本字符并更新显示
响应式数据：利用Vue 3的响应式系统实时更新界面
状态控制：通过变量控制动画的开始、进行和结束

三、基础实现（单次显示）

1. Vue组件模板

<template>
  <!-- 标题/标语区 -->
  <div class="header">
    <h1 class="main-title" style="min-height: 60px;">{{ typedTitle }}</h1>
    <p class="sub-title">AI智能优化，让简历闪闪发光</p>
  </div>
</template>

2. Vue组件逻辑

<script setup>
import { ref, onMounted } from 'vue';

const typedTitle = ref('');
const fullTitle = '为你的工作经历画龙点睛';

// 页面加载完成后执行
onMounted(() => {
  typeWriter();
});

// 打字机效果函数
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>

四、高级实现（循环展示）

1. 效果说明

循环展示的打字机效果包括以下阶段：

打字阶段：逐字显示文本
停留阶段：完整显示后短暂停留
消失阶段：逐字消失文本
等待阶段：完全消失后短暂等待，然后重新开始

2. Vue组件实现

<template>
  <!-- 标题/标语区 -->
  <div class="header">
    <h1 class="main-title" style="min-height: 60px;">{{ typedTitle }}</h1>
    <p class="sub-title">AI智能优化，让简历闪闪发光</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const typedTitle = ref('');
const fullTitle = '为你的工作经历画龙点睛';

// 页面加载完成后执行
onMounted(() => {
  typeWriter();
});

// 打字机效果函数 - 循环版
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); // 每个字符的间隔时间，单位毫秒
}

// 标题淡出效果
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>

五、优化建议

1. 性能优化

合理设置定时器间隔：建议在100-200毫秒之间，过快会导致动画不流畅，过慢会影响用户体验
及时清除定时器：使用clearInterval确保定时器在完成后被清除，避免内存泄漏
避免频繁响应式更新：虽然逐字更新需要多次更新响应式数据，但Vue 3的响应式系统已经做了优化

2. 用户体验优化

添加最小高度：为标题容器添加min-height，避免打字过程中页面布局跳动
调整动画速度：根据文本长度和场景调整打字速度，确保用户有足够时间阅读
考虑不同场景：单次显示适合重要标题，循环显示适合需要持续吸引注意力的场景

3. 扩展功能

添加光标效果：可以在打字过程中添加光标闪烁效果，增强真实感
多文本切换：可以实现多个文本的循环切换显示，丰富页面内容
响应式调整：根据设备尺寸和屏幕方向调整字体大小和动画速度
封装为可复用组件：将打字机效果封装为独立组件，方便在多个地方使用

六、应用场景

打字机效果适用于以下场景：

页面标题：为页面主标题添加动态效果，提升页面吸引力
品牌标语：突出展示品牌核心价值，增强记忆点
引导文本：引导用户进行下一步操作，提高转化率
加载提示：在数据加载过程中显示动态提示，缓解用户等待焦虑

七、代码示例

以下是一个完整的Vue 3组件示例，包含了循环打字机效果的实现：

完整Vue组件

<template>
  <div class="container">
    <!-- 标题/标语区 -->
    <div class="header">
      <h1 class="main-title" style="min-height: 60px;">{{ typedTitle }}</h1>
      <p class="sub-title">AI智能优化，让简历闪闪发光</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const typedTitle = ref('');
const fullTitle = '为你的工作经历画龙点睛';
let typeInterval = null;
let fadeInterval = null;

// 页面加载完成后执行
onMounted(() => {
  typeWriter();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (typeInterval) clearInterval(typeInterval);
  if (fadeInterval) clearInterval(fadeInterval);
});

// 打字机效果函数 - 循环版
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); // 每个字符的间隔时间，单位毫秒
}

// 标题淡出效果
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>

封装为可复用组件

如果需要在多个地方使用打字机效果，可以将其封装为一个可复用的组件：

<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: '为你的工作经历画龙点睛'
  },
  speed: {
    type: Number,
    default: 150
  },
  loop: {
    type: Boolean,
    default: false
  },
  delay: {
    type: Number,
    default: 2000
  }
});

const typedText = ref('');
let typeInterval = null;
let fadeInterval = null;

// 监听文本变化
watch(() => props.text, () => {
  if (typeInterval) clearInterval(typeInterval);
  if (fadeInterval) clearInterval(fadeInterval);
  typedText.value = '';
  typeWriter();
});

// 页面加载完成后执行
onMounted(() => {
  typeWriter();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (typeInterval) clearInterval(typeInterval);
  if (fadeInterval) clearInterval(fadeInterval);
});

// 打字机效果函数
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);
}

// 标题淡出效果
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 {
  /* 可根据需要添加样式 */
}
</style>

使用示例：

<template>
  <div class="container">
    <h1 class="main-title" style="min-height: 60px;">
      <Typewriter 
        text="为你的工作经历画龙点睛" 
        :loop="true" 
        :speed="150"
      />
    </h1>
    <p class="sub-title">AI智能优化，让简历闪闪发光</p>
  </div>
</template>

<script setup>
import Typewriter from './components/Typewriter.vue';
</script>

八、总结

打字机效果是一种简单但有效的页面动画技术，通过JavaScript定时器和小程序的数据绑定机制，我们可以轻松实现这一效果。无论是单次显示还是循环展示，都可以为页面增添动态感和趣味性，提升用户体验。

在实现过程中，我们需要注意性能优化和用户体验，合理设置动画参数，确保效果流畅自然。同时，我们也可以根据具体场景进行扩展和定制，创造出更加丰富多样的动态效果。

到此这篇关于Vue3中打字机效果实现的文章就介绍到这了,更多相关Vue3打字机效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue改变对象或数组时的刷新机制的方法总结
这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
VUE3常见面试题总结大全(看这一篇就够了)
Vue.js是一个流行的前端JavaScript框架,用于构建用户界面和单页应用,这篇文章主要给大家介绍了关于VUE3常见面试题总结的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
vue.prototype和vue.use的区别和注意点小结
这篇文章主要介绍了vue.prototype和vue.use的区别和注意点小结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue更多筛选项小组件使用详解
这篇文章主要为大家详细介绍了vue更多筛选项小组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue自定义组件插入到body中的实现方式
文章介绍了如何在Vue中创建一个自定义的notice提醒组件,并将其插入到body中,该组件通过调用`show`方法显示,调用`remove`方法销毁,主要步骤包括创建组件、使用render函数加载、$mount挂载并插入到body中
2025-12-12
vue-axios同时请求多个接口等所有接口全部加载完成再处理操作
这篇文章主要介绍了vue-axios同时请求多个接口等所有接口全部加载完成再处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue前端路由以及vue-router两种模式实例详解
路由这个概念最先是后端出现的,下面这篇文章主要给大家介绍了关于vue前端路由以及vue-router两种模式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
快速处理vue渲染前的显示问题
下面小编就为大家分享一篇快速处理vue渲染前的显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
简单设置el-date-picker的默认当前时间问题
这篇文章主要介绍了简单设置el-date-picker的默认当前时间问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue封装组件之上传图片组件
这篇文章主要为大家详细介绍了vue封装组件之上传图片组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10