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 官方文档 的完整参数列表。