在 vue 中使用 vue-typed-js 实现打字机效果
1、实现打字机效果:
一个字一个字出现,再一个字一个字消失,如此循环。
2、安装 vue-typed-js
npm install --save vue-typed-js
3、使用
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
Vue.use(VueTypedJs)
首先是<template></template>标签里的代码,代码如下所示:
其中,loop为true是为循环执行;strings是想要展示打印机效果的文字;typeSpeed是以毫秒为单位输入速度;backSpeed是以毫秒为单位的退格速度;startDelay是以毫秒为单位的输入前的时间
<vue-typed-js
class="desc"
:strings="typingTexts"
:loop="true"
:startDelay="300"
:typeSpeed="100"
:backSpeed="50"
>
<span class="typing"></span>
</vue-typed-js>
<script>
data() {
return {
typingTexts: [
"hello",
"world",
],
};
},
</script>
github
https://github.com/Orlandster/vue-typed-js#exampleshttps://github.com/Orlandster/vue-typed-js#examples