@8bu/vue-otp-input NPM

Simple Vue OTP Style Input

Only support Vue.js 2.2.x+
Any polyfill error (missing functions...etc) can be fixed by import polyfill lib or config polyfill for webpack & babel. I removed all polyfill due to this recommend

alt text

Working demo

Installation

Global:

// main
import Vue from 'vue';
import OTPInput from '@8bu/vue-otp-input';
Vue.use(OTPInput);

Component:

<script>
import OTPInput from '@8bu/vue-otp-input';
import '@8bu/vue-otp-input/';
module.export = {
  name: 'you-component',
  components: {
    'otp-input': OTPInput,
  }
}
</script>

Usage

<template>
  <otp-input
    v-model="userToken"
    class="field-container"
    :length="6"
    pattern="[^0-9]+"
    :ignorePattern="false"
    fieldClass="custom-field-class"
    :size="32"
    @valid="isTokenComplete"
    disabled={false}
  />
</template>

Properties

v-model is supported by default.

Prop	Type	Required	Default	Description
`class`	`string`	❌	❌	Outer class container
`length`	`number/string`	✔️	`4`	Number of expected characters
`pattern`	`string`	❌	`[^0-9]+`	Regex pattern of individual character input
`ignorePattern`	`boolean`	❌	`false`	Turn off character validation
`fieldClass`	`string`	❌	❌	Custom class for each input character
`size`	`number/string`	❌	`16`	Font size of input character (input size = 1.75 x font size).
`disabled`	`boolean`	❌	`false`	Working like native disabled
`password`	`boolean`	❌	`false`	Change all input type to password

Events

Name	Param: Type	Description
`change`	`value: string`	Return string result of user input
`valid`	`isValid: boolean`	Validate whenever user input to see if the input have been fully filled.