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>