虛擬數(shù)字鍵盤,可以配合密碼輸入框組件或自定義的輸入框組件使用。
通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { NumberKeyboard } from 'vant';
const app = createApp();
app.use(NumberKeyboard);
數(shù)字鍵盤提供了 ?input
?、?delete
?、?blur
? 事件,分別對(duì)應(yīng)輸入內(nèi)容、刪除內(nèi)容和失去焦點(diǎn)的動(dòng)作。
<van-cell @touchstart.stop="show = true">彈出默認(rèn)鍵盤</van-cell>
<van-number-keyboard
:show="show"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const show = ref(true);
const onInput = (value) => showToast(value);
const onDelete = () => showToast('刪除');
return {
show,
onInput,
onDelete,
};
},
};
點(diǎn)擊鍵盤以外的區(qū)域時(shí),鍵盤會(huì)自動(dòng)收起,通過阻止元素上的 touchstart 事件冒泡可以避免鍵盤收起。
將 theme 屬性設(shè)置為 ?custom
? 來展示鍵盤的右側(cè)欄,常用于輸入金額的場(chǎng)景。
<van-number-keyboard
:show="show"
theme="custom"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
通過 ?extra-key
? 屬性可以設(shè)置左下角按鍵內(nèi)容,比如需要輸入身份證號(hào)時(shí),可以將 ?extra-key
? 設(shè)置為 ?X
?。
<van-cell plain type="primary" @touchstart.stop="show = true">
彈出身份證號(hào)鍵盤
</van-cell>
<van-number-keyboard
:show="show"
extra-key="X"
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
通過 ?title
? 屬性可以設(shè)置鍵盤標(biāo)題。
<van-cell plain type="primary" @touchstart.stop="show = true">
彈出帶標(biāo)題的鍵盤
</van-cell>
<van-number-keyboard
:show="show"
title="鍵盤標(biāo)題"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
當(dāng) theme 為 ?custom
? 時(shí),支持以數(shù)組的形式配置兩個(gè) ?extra-key
?。
<van-cell plain type="primary" @touchstart.stop="show = true">
彈出配置多個(gè)按鍵的鍵盤
</van-cell>
<van-number-keyboard
:show="show"
theme="custom"
:extra-key="['00', '.']"
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
通過 ?random-key-order
? 屬性可以隨機(jī)排序數(shù)字鍵盤,常用于安全等級(jí)較高的場(chǎng)景。
<van-cell @touchstart.stop="show = true"> 彈出配置隨機(jī)數(shù)字的鍵盤 </van-cell>
<van-number-keyboard
:show="show"
random-key-order
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
可以通過 ?v-model
? 綁定鍵盤當(dāng)前輸入值,并通過 ?maxlength
? 屬性來限制輸入長(zhǎng)度。
<van-field v-model="value" readonly clickable @touchstart.stop="show = true" />
<van-number-keyboard
v-model="value"
:show="show"
:maxlength="6"
@blur="show = false"
/>
import { ref } from 'vue';
export default {
setup() {
const show = ref(true);
const value = ref('');
return {
show,
value,
};
},
};
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 當(dāng)前輸入值 | string | - |
show | 是否顯示鍵盤 | boolean | - |
title | 鍵盤標(biāo)題 | string | - |
theme | 樣式風(fēng)格,可選值為 custom
|
string | default
|
maxlength | 輸入值最大長(zhǎng)度 | number | string | Infinity
|
transition | 是否開啟過場(chǎng)動(dòng)畫 | boolean | true
|
z-index | 鍵盤 z-index 層級(jí) | number | string | 100
|
extra-key | 底部額外按鍵的內(nèi)容 | string | string[] | ''
|
close-button-text | 關(guān)閉按鈕文字,空則不展示 | string | - |
delete-button-text | 刪除按鈕文字,空則展示刪除圖標(biāo) | string | - |
close-button-loading | 是否將關(guān)閉按鈕設(shè)置為加載中狀態(tài),僅在 theme="custom" 時(shí)有效 |
boolean | false
|
show-delete-key | 是否展示刪除圖標(biāo) | boolean | true
|
blur-on-close v3.0.6
|
是否在點(diǎn)擊關(guān)閉按鈕時(shí)觸發(fā) blur 事件 | boolean | true
|
hide-on-click-outside | 是否在點(diǎn)擊外部時(shí)收起鍵盤 | boolean | true
|
teleport | 指定掛載的節(jié)點(diǎn),等同于 Teleport 組件的 to 屬性 | string | Element | - |
safe-area-inset-bottom | 是否開啟底部安全區(qū)適配 | boolean | true
|
random-key-order | 是否將通過隨機(jī)順序展示按鍵 | boolean | false
|
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
input | 點(diǎn)擊按鍵時(shí)觸發(fā) | key: string |
delete | 點(diǎn)擊刪除鍵時(shí)觸發(fā) | - |
close | 點(diǎn)擊關(guān)閉按鈕時(shí)觸發(fā) | - |
blur | 點(diǎn)擊關(guān)閉按鈕或非鍵盤區(qū)域時(shí)觸發(fā) | - |
show | 鍵盤完全彈出時(shí)觸發(fā) | - |
hide | 鍵盤完全收起時(shí)觸發(fā) | - |
名稱 | 說明 |
---|---|
delete | 自定義刪除按鍵內(nèi)容 |
extra-key | 自定義左下角按鍵內(nèi)容 |
title-left | 自定義標(biāo)題欄左側(cè)內(nèi)容 |
組件導(dǎo)出以下類型定義:
import type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-number-keyboard-background | var(--van-gray-2) | - |
--van-number-keyboard-key-height | 48px | - |
--van-number-keyboard-key-font-size | 28px | - |
--van-number-keyboard-key-active-color | var(--van-gray-3) | - |
--van-number-keyboard-key-background | var(--van-white) | - |
--van-number-keyboard-delete-font-size | var(--van-font-size-lg) | - |
--van-number-keyboard-title-color | var(--van-gray-7) | - |
--van-number-keyboard-title-height | 34px | - |
--van-number-keyboard-title-font-size | var(--van-font-size-lg) | - |
--van-number-keyboard-close-padding | 0 var(--van-padding-md) | - |
--van-number-keyboard-close-color | var(--van-link-color) | - |
--van-number-keyboard-close-font-size | var(--van-font-size-md) | - |
--van-number-keyboard-button-text-color | var(--van-white) | - |
--van-number-keyboard-button-background | var(--van-primary-color) | - |
--van-number-keyboard-z-index | 100 | - |
參見桌面端適配。
更多建議: