PasswordInput 密码输入框

介绍

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

引入

import Vue from 'vue';

import { PasswordInput, NumberKeyboard } from 'vant';

Vue.use(PasswordInput);

Vue.use(NumberKeyboard);

代码演示

基础用法

:value="value"

info="密码为 6 位数字"

:focused="showKeyboard"

@focus="showKeyboard = true"

/>

:show="showKeyboard"

@input="onInput"

@delete="onDelete"

@blur="showKeyboard = false"

/>

export default {

data() {

return {

value: '123',

showKeyboard: true

};

},

methods: {

onInput(key) {

this.value = (this.value + key).slice(0, 6);

},

onDelete() {

this.value = this.value.slice(0, this.value.length - 1);

}

}

}

自定义长度

:value="value"

:length="4"

:gutter="15"

:focused="showKeyboard"

@focus="showKeyboard = true"

/>

明文展示

:value="value"

:mask="false"

:focused="showKeyboard"

@focus="showKeyboard = true"

/>

错误提示

通过error-info属性可以设置错误提示信息，例如当输入六位时提示密码错误

:value="value"

:error-info="errorInfo"

:focused="showKeyboard"

@focus="showKeyboard = true"

/>

:show="showKeyboard"

@input="onInput"

@delete="onDelete"

@blur="showKeyboard = false"

/>

export default {

data() {

return {

value: '123',

showKeyboard: true,

errorInfo: ''

};

},

methods: {

onInput(key) {

this.value = (this.value + key).slice(0, 6);

if (this.value.length === 6) {

this.errorInfo = '密码错误';

} else {

this.errorInfo = '';

}

},

onDelete() {

this.value = this.value.slice(0, this.value.length - 1);

}

}

}

API

参数

说明

类型

默认值

value

密码值

string

''

info

输入框下方文字提示

string

-

error-info

输入框下方错误提示

string

-

length

密码最大长度

number丨 string

6

gutter

输入框格子之间的间距，

如 20px、2em，

默认单位为px

number 丨string

0

mask

是否隐藏密码内容

boolean

true

focused v2.1.8

是否已聚焦，聚焦时会显示光标

boolean

false

Events

事件名

说明

回调参数

focus

输入框聚焦时触发

-

实例