vue-single-input
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

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

alt text
alt text
alt text
alt text
alt text

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

Package Sidebar

Install

npm i vue-single-input

Weekly Downloads

4

Version

1.0.6

License

MIT

Unpacked Size

76.8 kB

Total Files

8

Last publish

Collaborators

  • prem1998