js自动打字--autotypejs

最新推荐文章于 2020-11-29 02:50:20 发布

原创

最新推荐文章于 2020-11-29 02:50:20 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #vue.js #html5 #css3

autotypejs是一个使用原生JavaScript（es6）实现的自动打字库，支持Vue。提供了配置、设置阶段、启动任务和监听任务完成事件等API。在使用时需注意DOM节点的挂载和游标的样式类配置。

autotypejs

use for typing automatically.

介绍

使用原生JavaScript（es6）实现的自动打字效果。

效果图

示例代码(vue)：

<template>
  <div class="type-container"></div>
</template>

<script>
import AutoType from "autotypejs";
export default {
   
   
  name: "AutoType",
  mounted() {
   
   
    const autoType = new AutoType(".type-container");
    autoType.config({
   
   
      loop: false,
      show_cursor: true,
    });
    autoType
      .setStage({
   
   
        type: "add",
        text: "如梦今",
        duration: 1000,
        style: {
   
   
          "font-weight": "bold",
          "font-size": "23px",
        },
      })
      .setStage({
   
   
        type: "delete",
        delete_count: 1,
        duration: 300,
      })
      .setStage({
   
   
        text: "令",
        duration: 300,
        style: {
   
   
          "font-weight": "bold",
          "font-size": "23px",
        },
      })