W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
帶網(wǎng)格的輸入框組件,可以用于輸入密碼、短信驗(yàn)證碼等場(chǎng)景,通常與數(shù)字鍵盤組件配合使用。
通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
const app = createApp();
app.use(PasswordInput);
app.use(NumberKeyboard);
搭配數(shù)字鍵盤組件來(lái)實(shí)現(xiàn)密碼輸入功能。
<!-- 密碼輸入框 -->
<van-password-input
:value="value"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
<!-- 數(shù)字鍵盤 -->
<van-number-keyboard
v-model="value"
:show="showKeyboard"
@blur="showKeyboard = false"
/>
import { ref } from 'vue';
export default {
setup() {
const value = ref('123');
const showKeyboard = ref(true);
return {
value,
showKeyboard,
};
},
};
通過(guò) ?length
? 屬性來(lái)設(shè)置密碼長(zhǎng)度。
<van-password-input
:value="value"
:length="4"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
通過(guò) ?gutter
? 屬性來(lái)設(shè)置格子之間的間距。
<van-password-input
:value="value"
:gutter="10"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
將 ?mask
? 設(shè)置為 ?false
? 可以明文展示輸入的內(nèi)容,適用于短信驗(yàn)證碼等場(chǎng)景。
<van-password-input
:value="value"
:mask="false"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
通過(guò) ?info
? 屬性設(shè)置提示信息,通過(guò) ?error-info
? 屬性設(shè)置錯(cuò)誤提示,例如當(dāng)輸入六位時(shí)提示密碼錯(cuò)誤。
<van-password-input
:value="value"
info="密碼為 6 位數(shù)字"
:error-info="errorInfo"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
<van-number-keyboard
v-model="value"
:show="showKeyboard"
@blur="showKeyboard = false"
/>
import { ref, watch } from 'vue';
export default {
setup() {
const value = ref('123');
const errorInfo = ref('');
const showKeyboard = ref(true);
watch(value, (newVal) => {
if (newVal.length === 6 && newVal !== '123456') {
errorInfo.value = '密碼錯(cuò)誤';
} else {
errorInfo.value = '';
}
});
return {
value,
errorInfo,
showKeyboard,
};
},
};
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
value | 密碼值 | string | ''
|
info | 輸入框下方文字提示 | string | - |
error-info | 輸入框下方錯(cuò)誤提示 | string | - |
length | 密碼最大長(zhǎng)度 | number | string | 6
|
gutter | 輸入框格子之間的間距,如 20px 2em ,默認(rèn)單位為px
|
number | string | 0
|
mask | 是否隱藏密碼內(nèi)容 | boolean | true
|
focused | 是否已聚焦,聚焦時(shí)會(huì)顯示光標(biāo) | boolean | false
|
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
focus | 輸入框聚焦時(shí)觸發(fā) | - |
組件導(dǎo)出以下類型定義:
import type { PasswordInputProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-password-input-height | 50px | - |
--van-password-input-margin | 0 var(--van-padding-md) | - |
--van-password-input-font-size | 20px | - |
--van-password-input-radius | 6px | - |
--van-password-input-background | var(--van-background-2) | - |
--van-password-input-info-color | var(--van-text-color-2) | - |
--van-password-input-info-font-size | var(--van-font-size-md) | - |
--van-password-input-error-info-color | var(--van-danger-color) | - |
--van-password-input-dot-size | 10px | - |
--van-password-input-dot-color | var(--van-text-color) | - |
--van-password-input-text-color | var(--van-text-color) | - |
--van-password-input-cursor-color | var(--van-text-color) | - |
--van-password-input-cursor-width | 1px | - |
--van-password-input-cursor-height | 40% | - |
--van-password-input-cursor-duration | 1s | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: