Keyboard 虚拟键盘

虚拟键盘，可以配合密码输入框组件或自定义的输入框组件使用。

代码演示

数字键盘输入

<hd-keyboard :show="showKeyboard" mode="simple" @blur="doBlur" v-model="keyboardNumber"></hd-keyboard>

import { areaList } from '@vant/area-data'

export default {
  data() {
    return {
        showKeyboard:  false, // 输入键盘是否打开
        keyboardNumber: 0 // 虚拟键盘输入的值
    };
  },
  methods: {
    showKeyboard() {
      this.showKeyboard = true
    }
  /**
   * 键盘输入完成
   * @param qty 最终输入的值
   */
  doConfirm(qty: number) {
    this.showKeyboard = false
  }
  /**
   * 键盘失焦
   * @param show 是否展示
   */
    doBlur(show: boolean) {
      this.showKeyboard = show
    }
  },
};

Props

Name	Description	Type	Required	Default
type	键盘类型	'number'	false	默认值：number
mode	键盘模式	'confirm：确认模式' / 'simple：极简模式'	false	默认值：simple
confirmTxt	确认按钮文字	String	false	默认值：完成
show	是否打开	Boolean	false	默认值：false

Events

Event Name	Description	Parameters
blur	虚拟键盘状态变更时触发	value:Boolean 虚拟键盘状态，建议通过v-model双向绑定输入值，而不是监听此事件的形式
confirm	虚拟键盘输入确认时触发	value:String, Number 输入的值
backspace	虚拟键盘删除按钮点击时触发	value:String, Number 删除一位虚拟键盘输入的值
input	-	-
change	-	-

Slots

Name	Description	Default Slot Content
content	-	-