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

Methods

Events

Slot