数字，提供两种样式风格，可以与或的输入框组件配合使用

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

Vue.use(NumberKeyboard);

<van-button @touchstart.stop="show = true">
  弹出认
</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"
/>

可以通过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: ''
    }
  }
}

通过extra-key可以设置左下角按键

<van-button plain type="primary" @touchstart.stop="show = true'">
  弹出身份证号码
</van-button>

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

通过title可以设置

<van-button plain type="info" @touchstart.stop="show = true'">
  弹出
</van-button>

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

API

常见问题

参见。

演示