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打字机效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用el-upload组件实现递归多文件上传的全过程
el-upload组件文件上传都是每个文件请求一次接口,本次实现一次请求上传多个文件,下面这篇文章主要给大家介绍了关于使用el-upload组件实现递归多文件上传的相关资料,需要的朋友可以参考下
2023-03-03
Vue页面渲染中key的应用实例教程
这篇文章主要给大家介绍了关于Vue页面渲染中key的应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
在Vue3+TypeScript中将文件URL转Base64的三种方法
这篇文章详细介绍了在Vue3项目中将blob URL转换为Base64格式的三种方法,包括使用FileReader、完整的Vue3组件示例以及使用axios的方案,重点说明了转换过程、性能考虑、错误处理以及后端接收等方面的关键点,需要的朋友可以参考下
2026-01-01
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
这篇文章主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
Vue实现回到顶部和底部动画效果
这篇文章主要为大家详细介绍了Vue实现回到顶部和底部动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue项目实现背景颜色以及下划线从左到右渐变动画效果
这篇文章主要介绍了vue项目实现背景颜色以及下划线从左到右渐变动画效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
详解Vscode中使用Eslint终极配置大全
这篇文章主要介绍了详解Vscode中使用Eslint终极配置大全，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
Vue项目中CSS Modules和Scoped CSS的介绍与区别
在vue中我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules,下面这篇文章主要给大家介绍了关于Vue项目中CSS Modules和Scoped CSS的相关资料,需要的朋友可以参考下
2022-03-03
vue中的rules表单校验规则使用方法示例详解 :rules=“rules“
这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
vue自定义指令directive实例详解
这篇文章主要介绍了vue自定义指令directive的相关资料，下面通过实例给大家介绍,需要的朋友可以参考下
2018-01-01