vue3-text-typer

适用于 vue3 中的打字机效果组件。

Links

npm pacakge-name：vue3-text-typer github repo-name: vue3-typewriter

Installation

• npm/yarn/pnpm安装

npm install --save vue3-text-typer
yarn add vue3-text-typer
pnpm add vue3-text-typer

Use

• 引用组件

import { Typer } from  "vue3-text-typer";

 <Typer text="您准备用打字机效果的文字" />

Options

| 属性名 | 类型 | 说明 | 必传 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | text | string | 作用打字机效果的文字 | 否 | 这是打字机预览效果，请传入 text 以替换默认文本。 | | speed | number | 打字速度，数值越大速度越慢，可以理解为打字延迟（最小/快为 0）| 否 | 80 | | show-cursor | boolean | 文字末尾光标是否闪烁 | 否 | true |

Methods

| 方法名 | 类型 | 说明 | | ------ | ------ | ------ | | finished | callback function | 打字结束的回调 | | typing | callback function | 正在打字回调 | | reset | function | 重新启动打字机 |

注意： reset是组件抛出的一个方法，可以重新启动打字机，使用如下：

<template>
  <Typer
    ref="typerRef"
    text="您准备用打字机效果的文字"
    @finished="finishedType"
    @typing="isTyping"
  />
</template>

<script>
  const typerRef = ref(null);
  typerRef.value.reset(); // 重启打字机

  const finishedType = () => {
    console.log('打印结束');
    // 做点什么
  }

  const typing = () => {
    console.log('正在打印');
    // 做点什么
  }
</script>