# NPM
$ npm install @bachdgvn/vue-otp-input --save
import OtpInput from "@bachdgvn/vue-otp-input";
Vue.component("v-otp-input", OtpInput);
<template>
<div>
<v-otp-input
inputClasses="otp-input"
:numInputs="4"
separator="-"
:shouldAutoFocus="true"
@on-complete="handleOnComplete"
@on-change="handleOnChange"
/>
</div>
</template>
export default {
methods: {
handleOnComplete(value) {
console.log("OTP: ", value);
},
handleOnChange(value) {
console.log("OTP: ", value);
}
}
};
.otp-input {
width: 40px;
height: 40px;
padding: 5px;
margin: 0 10px;
font-size: 20px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.3);
textalign: "center";
}
.error {
border: 1px solid red !important;
}
numInputs: {
default: 4,
},
separator: {
type: String,
default: '**',
},
inputClasses: {
type: String,
},
isInputNum: {
type: Boolean,
},
shouldAutoFocus: {
type: Boolean,
default: false,
}
Author: bachdgvn
Live Demo: https://zlx025mxpp.codesandbox.io/
Download Link: https://github.com/bachdgvn/vue-otp-input/archive/master.zip
Official Website: https://github.com/bachdgvn/vue-otp-input
#vuejs #javascript #vue-js