vue-single-input v1.0.6
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