Vue3 component that simulates a user typing, selecting, and erasing text

vue-typer-next

Vue3 component that simulates a user typing, selecting, and erasing text.

Installation

npm install --save vue-typer-next

Global import

Install the component:

import { createApp } from 'vue'
import vueTyperNext}from "vue-typer-next";
import "vue-typer-next/dist/style.css";
import App from './App.vue'

const app = createApp(App)

app.use(vueTyperNext)
app.mount('#app')

Manual import

<template>
	 <vueTyperNext data="departResultStri1ngs"/>
</template>
<script setup lang="ts">
  import { vueTyperNext } from "vue-typer-next";
  import "vue-typer-next/dist/style.css";
</script>

Usage

To get started simply add the vue-typer-next custom element to your template and pass the text, which should be typed to the data property. In addition you need to pass an element with the class prefix or suffix to the slot, which will be used as a wrapper.

Minimal setup:

 <vueTyperNext data="departResultStri1ngs"/>

Properties

You can make use of the following properties in order to customize your typing expirience:

Property Type Default Description
data Array/String The content that needs to be printed can be a string or an array, and the array will automatically add a line break after it
handlerNum Number 1 Number of executions, must be greater than 0
typeSpeed Number 15 type speed in milliseconds
typeSpeedLine Number 100 Line printing speed
cursorChar String _ character for cursor
back Boolean false When the data is an array, will the subsequent values of the data overwrite the previous value
backSpeed Number 30 Fallback speed
scrollDom String Scroll container class or id

Events

You can listen to the following events:

Event Description Usage
complete All typing is complete @complete="doSmth()"
lineComplete one line is complete @lineComplete="doSmth()"

Methods

You can listen to the following methods:

method Description parameter
start start typer
pause pause typer

Slots

You can listen to the following slots:

name Description
prefix prefix
suffix suffix

Features

None


License

MIT

GitHub

View Github