A OTP input component for Vue
DEMO: https://vue-otp-2-hoaitx.vercel.app/
npm i vue-otp-2In 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"
/>| 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 |
| Name | Description |
|---|---|
| onComplete | All input typed |
| onChange | Input filled |
.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;
}
}
}- Fix: length props does not work as expected
- Fix: Keypress not working on Samsung devices
- Added inputmode & pattern html input
- Improvement style
- And more...
- Fix: Event emit not correct
MIT