Vue Fake Input

Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Table of Contents

• Installation
• Usage
• License

Demos

Type one char per time

or... Paste the entire value

Installation

npm install vue-fake-input

or if you prefer yarn

yarn add vue-fake-input

Usage

Global

You may install Vue Fake Input globally:

import Vue from 'vue';
import VueFakeInput from 'vue-fake-input';

Vue.use(VueFakeInput);

This will make VueFakeInput available to all components within your Vue app.

Local

Include VueFakeInput directly into your component using import:

import VueFakeInput from 'vue-fake-input';

export default {
  ...
  components: {
    VueFakeInput
  }
  ...
};

Local - SSR mode

var VueFakeInput
if (process.browser) {
  VueFakeInput = require('vue-fake-input').default
}
export default {
  ...
  components: {
    VueFakeInput
  }
  ...
};

In order to get the full value of the inputs, you have to add a v-model bind on

vue-fake-input and link to any data attribute on your component.

Example

<vue-fake-input
  :length="5"
  :fontSize="40"
  inputColor="#31bce6"
  fontColor="#ffc107"
  :allowPaste="false"
  v-model="fullValue"
/>
...
export default {
  ...
  data() {
    return {
      fullValue: '',
    };
  }
  ...

Result:

Configuration (props accepted)

Property	Type	Required	Default	Description
length	Number	Yes		Length of the input. How many characters it will support (the value is coverted to pixel)
fontSize	Number	No	22	Font size of the individual characters (the value is coverted to pixel)
inputColor	String	No	'#42b983'	Color of the border bottom wen the input is filled
fontColor	String	No	'#42b983'	Color of the individual Characters
allowPaste	Boolean	No	true	Allow the user to paste values into the input
onlyNumber	Boolean	No	false	Only allow number input

License

This project is licensed under the MIT License - see the LICENSE.md file for details.