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   }   ... };

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)

License

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