多层html怎么找到密码输入框,Vant 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

Props参数说明类型默认值value密码值string''

info输入框下方文字提示string-

error-info输入框下方错误提示string-

length密码最大长度number | string6

gutter输入框格子之间的间距，如 20px 2em，默认单位为pxnumber | string0

mask是否隐藏密码内容booleantrue

focused v2.1.8是否已聚焦，聚焦时会显示光标booleanfalse

Events事件名说明回调参数focus输入框聚焦时触发-