NumberKeyboard 数字键盘

引入

  1. import { NumberKeyboard } from 'vant';
  2. Vue.use(NumberKeyboard);

代码演示

默认样式

  1. <van-button @touchstart.stop="show = true">
  2. 弹出默认键盘
  3. </van-button>
  4. <van-number-keyboard
  5. :show="show"
  6. extra-key="."
  7. close-button-text="完成"
  8. @blur="show = false"
  9. @input="onInput"
  10. @delete="onDelete"
  11. />
  1. export default {
  2. data() {
  3. return {
  4. show: true
  5. }
  6. },
  7. methods: {
  8. onInput(value) {
  9. Toast(value);
  10. },
  11. onDelete() {
  12. Toast('删除');
  13. }
  14. }
  15. }

自定义样式

  1. <van-number-keyboard
  2. :show="show"
  3. theme="custom"
  4. extra-key="."
  5. close-button-text="完成"
  6. @blur="show = false"
  7. @input="onInput"
  8. @delete="onDelete"
  9. />

API

Props

参数说明类型默认值版本
show是否显示键盘Boolean--
theme样式风格,可选值为 default customStringdefault-
title键盘标题String--
transition是否开启过场动画Booleantrue-
z-index键盘 z-indexNumber100-
extra-key左下角按键内容String''-
close-button-text关闭按钮文字,空则不展示String--
delete-button-text删除按钮文字String删除1.4.3
show-delete-key是否展示删除按钮Booleantrue-
hide-on-click-outside点击外部时是否收起键盘Booleantrue-
safe-area-inset-bottom是否开启 iPhone X 底部安全区适配,需要在 viewport meta 标签中设置 viewport-fit=coverBooleanfalse1.6.15

Events

事件名说明回调参数
input点击按键时触发key: 按键内容
delete点击删除键时触发-
close点击关闭按钮时触发-
blur点击关闭按钮或非键盘区域时触发-
show键盘完全弹出时触发-
hide键盘完全收起时触发-

Slots

名称说明
delete自定义删除按钮内容
title-left自定义标题栏左侧内容

NumberKeyboard 数字键盘 - 图1