vue2-superplaceholder

2.0.2 • Public • Published

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.

circle-ci npm version Dependencies npm downloads code style: prettier License: MIT


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]
    }

Package Sidebar

Install

npm i vue2-superplaceholder

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

24.2 kB

Total Files

8

Last publish

Collaborators

  • gomah