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
// main
import Vue from 'vue';
import OTPInput from '@8bu/vue-otp-input';
Vue.use(OTPInput);
<script>
import OTPInput from '@8bu/vue-otp-input';
import '@8bu/vue-otp-input/';
module.export = {
name: 'you-component',
components: {
'otp-input': OTPInput,
}
}
</script>
<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>
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 |
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. |
Mobile devices may not have paste & backscape/delete feature. I'm working on another approach for this issue.
From v1.2.0+, I will note some simple change log to keep track my changes.
- Add
submit
event when user pressEnter
- Focus is now select a whole input field
- Fix mobile input issue
- Update new prop
password
for changing input type to password
If you want to contribute to this please read the Contribution guidelines