Vue Single input

Vue single input takes only one input in a box used for taking OTP, MPIN inputs.

Installing

Using npm:

$ npm install vue-single-input

Using yarn:

$ yarn add vue-single-input

Usage

import in index.ts / index.js

import SingleInput from "vue-single-input";

add to Vue

Vue.use(SingleInput);

Than use anywhere in template

<SingleInput formId="your-form-id" />

NOTE: formId is required

Example

<SingleInput
  v-model="myMpin"
  formId="id"
  :boxCount="4"
  textColor="green"
  borderColor="red"
  textSize="2em"
  :withBorder="false"
  borderRadius="0%"
  backgroundColor="none"
  type="text"
/>

Output

Options

• v-model : Takes Variable name given by developer

• formId : Required form Id given by developer

• boxCount : Type is number

• textColor : Takes any valid color given by developer. Ex: red, green, '#ff00ff', 'rgba(1, 1, 0, 0.5)'

• borderColor : Takes any valid color given by developer. Ex: red, green, '#ff00ff', 'rgba(1, 1, 0, 0.5)'

• textSize : Ex: 2rem, 3em, 1px, 4px

• withBorder : Takes boolen values true or false

• borderRadius : Ex: 10%, 50%, 2rem, 3em, 1px, 4px

• backgroundColor : Takes any valid color given by developer. Ex: red, green, '#ff00ff', 'rgba(1, 1, 0, 0.5)'

• type : Ex: number, password, text

License