首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue-Typed-JS打字动画效果

Vue-Typed-JS打字动画效果实现全过程

2025-08-22 10:38:14 作者：孩子你要相信光

Vue-typed-js是一个用于Vue.js的Typed.js集成插件,它可以创建打字动画效果,这篇文章主要介绍了Vue-Typed-JS打字动画效果实现的相关资料,文中将插件的安装及使用介绍的非常详细,需要的朋友可以参考下

vue-typed-js 简介

vue-typed-js 是 Vue.js 的一个插件，基于 Typed.js 实现打字机动画效果。适用于展示动态文本、标语或代码片段，支持自定义速度、循环等配置。

安装方法

通过 npm 或 yarn 安装：

npm install vue-typed-js
# 或
yarn add vue-typed-js

在项目中全局注册：

import Vue from 'vue';
import VueTypedJs from 'vue-typed-js';

Vue.use(VueTypedJs);

基础用法

在组件中直接使用 vue-typed-js 组件：

<template>
  <vue-typed-js :strings="['Hello World', 'Welcome to Vue Typed JS']">
    <h1 class="typing"></h1>
  </vue-typed-js>
</template>

配置选项

通过 props 传递参数控制动画行为：

<template>
  <vue-typed-js
    :strings="['Option 1', 'Option 2']"
    :typeSpeed="50"
    :backSpeed="30"
    :loop="true"
  >
    <span class="typing"></span>
  </vue-typed-js>
</template>

常用参数：

strings：数组形式，包含要显示的文本。
typeSpeed：打字速度（毫秒）。
backSpeed：删除速度（毫秒）。
loop：是否循环播放。
showCursor：是否显示光标。

事件绑定

监听动画状态变化：

<template>
  <vue-typed-js
    @onComplete="handleComplete"
    @preStringTyped="handlePreTyped"
  >
    <p class="typing"></p>
  </vue-typed-js>
</template>

<script>
export default {
  methods: {
    handleComplete() {
      console.log('Animation completed');
    },
    handlePreTyped(stringIndex) {
      console.log(`Typing string ${stringIndex}`);
    }
  }
};
</script>

动态更新内容

通过 ref 动态修改文本：

<template>
  <vue-typed-js ref="typed" :strings="initialStrings">
    <div class="typing"></div>
  </vue-typed-js>
  <button @click="updateText">更新文本</button>
</template>

<script>
export default {
  data() {
    return {
      initialStrings: ['Initial Text']
    };
  },
  methods: {
    updateText() {
      //this.$refs.typed.$typed 实例
      this.$refs.typed.options.strings = ['New Text'];
      this.$refs.typed.typed.reset(); // 重置动画
    }
  }
};
</script>

样式自定义

通过 CSS 修改光标或文本样式：

.typed-cursor {
  opacity: 1;
  color: #42b983;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

常用配置属性

属性	类型	默认值	描述
strings	Array	[]	要显示的文字数组
stringsElement	String	null	包含字符串的元素的ID
typeSpeed	Number	40	打字速度（毫秒）
backSpeed	Number	20	删除速度（毫秒）
startDelay	Number	0	开始前的延迟
backDelay	Number	500	删除前的延迟
loop	Boolean	false	是否循环
loopCount	Number	Infinity	循环次数
showCursor	Boolean	true	是否显示光标
cursorChar	String	"	"	光标字符
fadeOut	Boolean	false	是否淡出
fadeOutClass	String	"typed-fade-out"	淡出CSS类
fadeOutDelay	Number	500	淡出延迟
shuffle	Boolean	false	是否随机播放字符串
smartBackspace	Boolean	true	是否智能退格

Vue-Typed-JS 实例方法

方法名	参数	返回值	说明
`start()`	-	-	开始打字动画
`stop()`	-	-	停止当前动画
`toggle()`	-	-	切换动画状态（运行/停止）
`reset()`	-	-	重置动画（清除文本并回到初始状态）
`destroy()`	-	-	完全销毁实例
`complete()`	-	-	立即完成当前字符串的显示
`cursor.remove()`	-	-	移除光标元素
`cursor.show()`	-	-	显示光标（如果之前被隐藏）
`cursor.hide()`	-	-	隐藏光标

动态更新字符串的方法：

// 需要先重置再更新
this.$refs.myTyped.$typed.strings = ["新文本1", "新文本2"];
this.$refs.myTyped.$typed.reset().start();

事件监听方法：

this.$refs.myTyped.$typed.on('complete', () => {
  console.log('动画完成');
});

提示：所有方法调用前需通过 this.$refs.[ref名称].$typed 获取实例。修改配置属性（如 strings）后需要调用 reset() 使更改生效。

注意事项

确保 strings 为数组类型，否则动画无效。
动态更新内容时需调用 reset() 方法重新触发动画。
如需复杂配置，参考 Typed.js 官方文档的完整参数列表。

总结

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