介紹

帶網格的輸入框組件，可以用于輸入支付密碼、短信驗證碼等，通常與數字鍵盤組件配合使用

引入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輸入框聚焦時觸發-

總結

以上是生活随笔為你收集整理的多层html怎么找到密码输入框,Vant PasswordInput 密码输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。