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
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-modelis 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 |
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. |
Contributions are welcome!
If you want to contribute to this please read the Contribution guidelines
