html密码输入框格子,PasswordInput 密码输入框 - Vant 中文文档

介绍

带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。

引入

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

输入框聚焦时触发

–