vue-multi-number-input
Input component for separating the input one by one character.
for the web built with Vue 2.x.
This library was remade based on vue-otp-input.
Installation
To install the latest stable version:
npm i vue-multi-number-input
Import:
import VueMultiNumberInput from "vue-multi-number-input";
Vue.component("MultiNumberInput", VueMultiNumberInput);Code example:
<template>
<div style="display: flex; flex-direction: row;">
<MultiNumberInput
ref="multiNumberInput"
:should-auto-focus="true"
:num-inputs="6"
:input-wrapper-style="{
border: '1px solid #ECECED'
}"
:input-active-wrapper-style="{
border: '1px solid #FFA500',
color: '#FFA500'
}"
@on-change="handleOnChange"
@on-complete="handleOnComplete"
>
<template slot="separator">
<span>-</span>
</template>
</MultiNumberInput>
<button @click="handleClearInput()">Clear Input</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleOnComplete(value) {
console.log('MultiNumberInput completed: ', value);
},
handleOnChange(value) {
console.log('MultiNumberInput changed: ', value);
},
handleClearInput() {
this.$refs.multiNumberInput.clearInput();
},
},
};
</script>
Props
| Name |
Type | Required | Default | Description |
|---|---|---|---|---|
| num-inputs | number | true | 4 | Number of inputs to be rendered. |
| input-wrapper-style | Object | false | none | Style applied passed to each input. |
| input-active-wrapper-style | Object | false | none | Style applied passed to each actived input. |
| should-auto-focus | boolean | false | false | Auto focuses input on inital page load. |
Methods
| Name |
Description |
|---|---|
| clearInput() | Use with $refs for clearing all number inputs, see code example section. |
Events
| Name |
Description |
|---|---|
| on-change | Return MultiNumberString code was changing when we made a change in inputs. |
| on-complete | Return MultiNumberString code typed in inputs. |
Slot
| Name |
Description |
|---|---|
| separator | Slot to be inserted between input and input |