Vue.js的非常简单的验证码(也称为密码)输入组件。同时支持数字和文本。
# NPM
$ npm i vue-verification-code-input --save
1.导入组件。
import CodeInput from "vue-verification-code-input";
2.基本用法:
<template>
<div id="app">
<CodeInput :loading="false" class="input" v-on:change="onChange" v-on:complete="onComplete" />
</div>
</template>
3.所有可能的 props :
export default {
name: "app",
components: {
CodeInput
},
methods: {
onChange(v) {
console.log("onChange ", v);
},
onComplete(v) {
console.log("onComplete ", v);
}
}
};
type: {
type: String,
default: "number" // or text
},
className: String,
fields: {
type: Number,
default: 6
},
fieldWidth: {
type: Number,
default: 58
},
fieldHeight: {
type: Number,
default: 54
},
autoFocus: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
title: String,
change: Function,
complete: Function,
loading: {
type: Boolean,
default: false
}