0.0.1 • Published 1 year ago
vue3-typed-js v0.0.1
vue3-typed-js
A Vue3 wrapper for Typed.js library.
Installation
npm install vue3-typed-js
Usage
import { createApp } from 'vue';
import App from './App.vue';
import VueTyped from 'vue3-typed-js';
const app = createApp(App);
app.use(VueTyped);
app.mount('#app');
Example usage inside your Vue component:
<template>
<VueTyped
:strings="typedStrings"
:typeSpeed="50"
:backSpeed="30"
:loop="true"
@onComplete="handleComplete"
></VueTyped>
</template>
<script>
export default {
data() {
return {
typedStrings: ['Hello, ^1000 I am Typed.js', 'And I work with Vue 3!'],
};
},
methods: {
handleComplete() {
console.log('Typing is complete');
},
},
};
</script>
Props
Prop | Type | Description |
---|---|---|
strings | Array | An array of strings to type |
typeSpeed | Number | Typing speed in milliseconds |
startDelay | Number | Time before typing starts (in milliseconds) |
backSpeed | Number | Backspacing speed in milliseconds |
smartBackspace | Boolean | Enable/disable smart backspace |
shuffle | Boolean | Enable/disable shuffling of strings |
backDelay | Number | Time before backspacing (in milliseconds) |
fadeOut | Boolean | Enable/disable fade out animation |
fadeOutClass | String | CSS class for fade animation |
fadeOutDelay | Number | Fade out delay in milliseconds |
loop | Boolean | Enable/disable loop |
loopCount | Number | Number of loops or Infinity |
showCursor | Boolean | Show/hide the cursor |
autoInsertCss | Boolean | Insert CSS for cursor and fadeOut into HTML |
attr | String | Attribute for typing |
bindInputFocusEvents | Boolean | Bind to focus and blur if el is text input or textarea |
contentType | String | 'html' or 'null' for plaintext |
onComplete | Function | Callback when typing is complete |
preStringTyped | Function | Callback before a string is typed |
onStringTyped | Function | Callback when a string is typed |
onLastStringBackspaced | Function | Callback when the last string is typed and backspaced |
onTypingPaused | Function | Callback when typing is paused |
onTypingResumed | Function | Callback when typing is resumed |
onReset | Function | Callback when the typed instance is reset |
onStop | Function | Callback when the typed instance is stopped |
onStart | Function | Callback when the typed instance starts |
onDestroy | Function | Callback when the typed instance is destroyed |
License
MIT
0.0.1
1 year ago