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.

Live Demo

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	false	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