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() 使更改生效。 

注意事项

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