这篇博客和我的博客:原生 JS 实现打印机效果,一个字一个字出现,再一个字一个字消失,如此循环是实现的相同功能——打字机效果。即,一个字一个字出现,再一个字一个字消失,如此循环。如下图为大概样子:
在这里插入图片描述  我是在用原生js实现后看到typed.js这个js插件,进而找到了 vue-typed-js这个插件的,上面还有react的,位置如下图所示。
在这里插入图片描述
  下面说一下 vue-typed-js这个插件的使用。

一、安装

npm install --save vue-typed-js

二、引入

import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
 
Vue.use(VueTypedJs)

三、使用

  首先是<template></template>标签里的代码,代码如下所示:

  其中,looptrue是为循环执行;strings是想要展示打印机效果的文字;typeSpeed是以毫秒为单位输入速度;backSpeed是以毫秒为单位的退格速度;startDelay是以毫秒为单位的输入前的时间;想要添加额外的设置可以去看我最下面附的github地址。

  注意:这里的class="desc"是我为了添加额外的css样式,额外添加的。

<vue-typed-js
  class="desc"
  :strings="typingTexts"
  :loop="true"
  :startDelay="300"
  :typeSpeed="100"
  :backSpeed="50"
>
  <span class="typing"></span>
</vue-typed-js>

  然后附一下 js 代码,只需设置个data即可。代码如下:

data() {
  return {
    typingTexts: [
      "纠正一个错误的方法有很多,",
      "而解决一个错误的终极方法,就是不给它发生的机会。",
    ],
  };
},

  最后附一下 vue-typed-js这个插件的地址:https://github.com/Orlandster/vue-typed-js

  总得来说,挺好用的。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐