Vant3 NumberKeyboard 數字鍵盤

2021-09-09 16:02 更新

介紹

虛擬數字鍵盤,可以配合密碼輸入框組件或自定義的輸入框組件使用。

實例演示

引入

通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊

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,
    };
  },
};

API

Props

參數 說明 類型 默認值
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

Events

事件名 說明 回調參數
input 點擊按鍵時觸發(fā) key: 按鍵內容
delete 點擊刪除鍵時觸發(fā) -
close 點擊關閉按鈕時觸發(fā) -
blur 點擊關閉按鈕或非鍵盤區(qū)域時觸發(fā) -
show 鍵盤完全彈出時觸發(fā) -
hide 鍵盤完全收起時觸發(fā) -

Slots

名稱 說明
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 -

常見問題

在桌面端無法操作組件?

參見桌面端適配。


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號