首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3打字机效果

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

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