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