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