Keyboard 虚拟键盘

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

代码演示

数字键盘输入

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

<script lang="ts" setup>
import { ref } from 'vue'

const showKeyboard = ref<boolean>(false) // 输入键盘是否打开
const keyboardNumber = ref<number | ''>('') // 虚拟键盘输入的值

function onClick() {
  showKeyboard.value = true
}

/**
 * 键盘输入完成
 * @param qty 最终输入的值
 */
function doConfirm(qty: number) {
  showKeyboard.value = false
}

/**
 * 键盘失焦
 * @param show 是否展示
 */
function doBlur(show: boolean) {
  showKeyboard.value = show
}
</script>

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	-	-