插件名称 | vue-otp-input |
---|---|
发布时间 | 2020年4月13日 |
插件作者 | bachdgvn |
vue-otp-input是用于一次性密码输入的可自定义PIN代码组件。
v1.0.8(06/16/2020)
# NPM
$ npm install @bachdgvn/vue-otp-input --save
1.在vue.js之后安装并导入组件。
import OtpInput from "@bachdgvn/vue-otp-input";
2.注册组件。
Vue.component("v-otp-input", OtpInput);
3.在您的应用模板中创建一次性密码输入组件。
<template>
<div>
<v-otp-input
inputClasses="otp-input"
:numInputs="4"
separator="-"
:shouldAutoFocus="true"
@on-complete="handleOnComplete"
@on-change="handleOnChange"
/>
</div>
</template>
4.更改密码输入并完全填满后,请执行一些操作。
export default {
methods: {
handleOnComplete(value) {
console.log("OTP: ", value);
},
handleOnChange(value) {
console.log("OTP: ", value);
}
}
};
5.将自己的CSS应用于密码输入。
.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;
}
6.所有可能的props 都可以自定义密码输入。
numInputs: {
default: 4,
},
separator: {
type: String,
default: '**',
},
inputClasses: {
type: String,
},
isInputNum: {
type: Boolean,
},
shouldAutoFocus: {
type: Boolean,
default: false,
}