VUE OTP INPUT
A OTP input component for Vue
DEMO: https://vue-otp-2-hoaitx.vercel.app/
Installation
npm i vue-otp-2
Usage example
In main.js
import Vue from 'vue'
import VueOtp2 from 'vue-otp-2';
Vue.use(VueOtp2)
In App.vue
<vue-otp-2
length="6"
join-character="-"
inputmode="numeric"
pattern="[0-9]*"
@onChange="console.log"
@onComplete="console.log"
/>
Props
Name | Type | Default | Description |
---|---|---|---|
length | String | 6 | The number of input |
join-character | String | character to join inputs | |
inputmode | String | numeric | numeric/text |
pattern | String | [0-9]* | HTML attribute: pattern |
Events
Name | Description |
---|---|
onComplete | All input typed |
onChange | Input filled |
Style
.vue-otp-2 {
display: flex;
justify-content: space-between;
div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
input {
max-width: 30px;
padding: 11.5px 8px;
font-size: 20px;
border-radius: 3px;
border: 1px solid #cecece;
text-align: center;
}
span {
display: block;
flex: 1;
text-align: center;
}
}
}
Release History
1.0.3: Fixed some bugs & improvement
- Fix: Keypress not working on Samsung devices
- Added inputmode & pattern html input
- Improvement style
- And more...
1.0.2: Fixed some bugs
- Fix: Event emit not correct
1.0.1: RELEASE
License
MIT