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 custom String default
title 键盘标题 String -
transition 是否开启过场动画 Boolean true
z-index 键盘 z-index Number 100
extra-key 左下角按键内容 String ''
close-button-text 关闭按钮文字，空则不展示 String -
show-delete-key 是否展示删除按钮 Boolean true
hide-on-click-outside 点击外部时是否收起键盘 Boolean true

Event

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

Field - 输入框

PasswordInput - 密码输入框

原文:

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