vue2-superplaceholder
SuperPlaceholder component based on superplaceholder.js for Vue 2.x.
superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.
Installation
# yarn $ yarn add vue2-superplaceholder # npm $ npm install vue2-superplaceholder --save
Example
<template> <super-placeholder :sentences="['Something to show', 'Another thing to show']" v-model="form.email" :options="{ cursor: '_' }" > </super-placeholder></template> <script>import SuperPlaceholder from 'vue2-superplaceholder'; export default { data() { return { form: { email: null, }, }; }, components: { SuperPlaceholder, },};</script>
Customization
Optional options
object for custom settings.
options: // delay between letters (in milliseconds) letterDelay: 100 // milliseconds // delay between sentences (in milliseconds) sentenceDelay: 1000 // should start on input focus. Set false to autostart startOnFocus: true // [DEPRECATED] // loop through passed sentences loop: false // Initially shuffle the passed sentences shuffle: false // Show cursor or not. Shows by default showCursor: true // String to show as cursor cursor: '|' // Control onFocus behaviour. Default is `superplaceholder.Actions.START` onFocusAction: superplaceholderActionsNOTHING|START|STOP // Control onBlur behaviour. Default is `superplaceholder.Actions.STOP` onBlurAction: superplaceholderActionsNOTHING|START|STOP