Vant3 NumberKeyboard 數(shù)字鍵盤(pán)

介紹

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

實(shí)例演示

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

const app = createApp();
app.use(NumberKeyboard);

代碼演示

默認(rèn)樣式

數(shù)字鍵盤(pán)提供了 input、delete、blur 事件，分別對(duì)應(yīng)輸入內(nèi)容、刪除內(nèi)容和失去焦點(diǎn)的動(dòng)作。

<van-cell @touchstart.stop="show = true">彈出默認(rèn)鍵盤(pán)</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,
    };
  },
};

點(diǎn)擊鍵盤(pán)以外的區(qū)域時(shí)，鍵盤(pán)會(huì)自動(dòng)收起，通過(guò)阻止元素上的 touchstart 事件冒泡可以避免鍵盤(pán)收起。

帶右側(cè)欄的鍵盤(pán)

將 theme 屬性設(shè)置為 custom 來(lái)展示鍵盤(pán)的右側(cè)欄，常用于輸入金額的場(chǎng)景。

<van-number-keyboard
  :show="show"
  theme="custom"
  extra-key="."
  close-button-text="完成"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

身份證號(hào)鍵盤(pán)

通過(guò) extra-key 屬性可以設(shè)置左下角按鍵內(nèi)容，比如需要輸入身份證號(hào)時(shí)，可以將 extra-key 設(shè)置為 X。

<van-cell plain type="primary" @touchstart.stop="show = true">
  彈出身份證號(hào)鍵盤(pán)
</van-cell>
<van-number-keyboard
  :show="show"
  extra-key="X"
  close-button-text="完成"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

鍵盤(pán)標(biāo)題

通過(guò) title 屬性可以設(shè)置鍵盤(pán)標(biāo)題。

<van-cell plain type="primary" @touchstart.stop="show = true">
  彈出帶標(biāo)題的鍵盤(pán)
</van-cell>
<van-number-keyboard
  :show="show"
  title="鍵盤(pán)標(biāo)題"
  extra-key="."
  close-button-text="完成"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

配置多個(gè)按鍵

當(dāng) theme 為 custom 時(shí)，支持以數(shù)組的形式配置兩個(gè) extra-key。

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

隨機(jī)數(shù)字鍵盤(pán)

通過(guò) random-key-order 屬性可以隨機(jī)排序數(shù)字鍵盤(pán)，常用于安全等級(jí)較高的場(chǎng)景。

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

雙向綁定

可以通過(guò) v-model 綁定鍵盤(pán)當(dāng)前輸入值，并通過(guò) maxlength 屬性來(lái)限制輸入長(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,
    };
  },
};

API

Props

Events

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見(jiàn)問(wèn)題

在桌面端無(wú)法操作組件？

參見(jiàn)桌面端適配。