NumberKeyboard 数字键盘

使用指南

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

代码演示

默认样式

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

自定义样式

  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

参数说明类型默认值版本
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-

Event

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

原文: https://youzan.github.io/vant/#/zh-CN/number-keyboard