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

介紹

數(shù)字鍵盤(pán)，提供兩種樣式風(fēng)格，可以與密碼輸入框或自定義的輸入框組件配合使用

引入

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

Vue.use(NumberKeyboard);

代碼演示

默認(rèn)樣式

<van-button @touchstart.stop="show = true">
  彈出默認(rèn)鍵盤(pán)
</van-button>
<van-number-keyboard
  :show="show"
  extra-key="."
  close-button-text="完成"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

import { Toast } from 'vant';

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

自定義樣式

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

雙向綁定

可以通過(guò)v-model綁定鍵盤(pán)當(dāng)前輸入值

<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: ''
    }
  }
}

左下角按鍵內(nèi)容

通過(guò)extra-key屬性可以設(shè)置左下角按鍵內(nèi)容

<van-button plain type="primary" @touchstart.stop="show = true'">
  彈出身份證號(hào)碼鍵盤(pán)
</van-button>

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

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

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

<van-button plain type="info" @touchstart.stop="show = true'">
  彈出自定義標(biāo)題鍵盤(pán)
</van-button>

<van-number-keyboard
  :show="show"
  close-button-text="完成"
  title="鍵盤(pán)標(biāo)題"
  extra-key="."
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>

API

Props

Events

Slots

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

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

參見(jiàn)在桌面端使用。