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: superplaceholder.Actions.[NOTHING|START|STOP]
		// Control onBlur behaviour. Default is `superplaceholder.Actions.STOP`
 		onBlurAction: superplaceholder.Actions.[NOTHING|START|STOP]
	}