介绍
带网格的输入框组件,可以用于输入密码、短信验证码等场景,通常与数字键盘组件配合使用。
引入
import { createApp } from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
const app = createApp();
app.use(PasswordInput);
app.use(NumberKeyboard);
代码演示
基础用法
搭配数字键盘组件来实现密码输入功能。
:value="value"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
v-model="value"
:show="showKeyboard"
@blur="showKeyboard = false"
/>
export default {
data() {
return {
value: '123',
showKeyboard: true,
};
},
};
自定义长度
通过 length 属性来设置密码长度。
:value="value"
:length="4"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
格子间距
通过 gutter 属性来设置格子之间的间距。
:value="value"
:gutter="10"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
明文展示
将 mask 设置为 false 可以明文展示输入的内容,适用于短信验证码等场景。
:value="value"
:mask="false"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
提示信息
通过 info 属性设置提示信息,通过 error-info 属性设置错误提示,例如当输入六位时提示密码错误。
:value="value"
info="密码为 6 位数字"
:error-info="errorInfo"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
v-model="value"
:show="showKeyboard"
@blur="showKeyboard = false"
/>
export default {
data() {
return {
value: '123',
errorInfo: '',
showKeyboard: true,
};
},
watch: {
value(value) {
if (value.length === 6 && value !== '123456') {
this.errorInfo = '密码错误';
} else {
this.errorInfo = '';
}
},
},
};
API
Props
参数
说明
类型
默认值
value
密码值
string
''
info
输入框下方文字提示
string
–
error-info
输入框下方错误提示
string
–
length
密码最大长度
number / string
6
gutter
输入框格子之间的间距,如 20px 2em,默认单位为px
number / string
0
mask
是否隐藏密码内容
boolean
true
focused
是否已聚焦,聚焦时会显示光标
boolean
false
Events
事件名
说明
回调参数
focus
输入框聚焦时触发
–