介紹

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

引入

import Vue from 'vue';
import { NumberKeyboard } from 'vant';

Vue.use(NumberKeyboard);

代碼演示

默認樣式

數(shù)字鍵盤提供了 input、delete、blur 事件，分別對應輸入內(nèi)容、刪除內(nèi)容和失去焦點的動作。

<van-cell @touchstart.native.stop="show = true">彈出默認鍵盤</van-cell>
<van-number-keyboard
  :show="show"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast('刪除');
    },
  },
};

點擊鍵盤以外的區(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 屬性可以設置左下角按鍵內(nèi)容，比如需要輸入身份證號時，可以將 extra-key 設置為 X。

<van-cell plain type="primary" @touchstart.native.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="info" @touchstart.native.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 時，支持以數(shù)組的形式配置兩個 extra-key。

<van-cell plain type="primary" @touchstart.native.stop="show = true">
  彈出配置多個按鍵的鍵盤
</van-cell>
<van-number-keyboard
  :show="show"
  theme="custom"
  :extra-key="['00', '.']"
  close-button-text="完成"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

隨機數(shù)字鍵盤

通過 random-key-order 屬性可以隨機排序數(shù)字鍵盤，常用于安全等級較高的場景。

<van-cell @touchstart.native.stop="show = true">
  彈出配置隨機數(shù)字的鍵盤
</van-cell>
<van-number-keyboard
  :show="show"
  random-key-order
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

雙向綁定

可以通過 v-model 綁定鍵盤當前輸入值。

<van-field
  readonly
  clickable
  :value="value"
  @touchstart.native.stop="show = true"
/>
<van-number-keyboard
  v-model="value"
  :show="show"
  :maxlength="6"
  @blur="show = false"
/>

export default {
  data() {
    return {
      show: false,
      value: '',
    };
  },
};

API

Props

Events

Slots

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。

常見問題

在桌面端無法操作組件？

參見桌面端適配。