Keyboard 虚拟安全键盘

用于金融支付、身份证输入、车牌号码录入与密码安全的自定义底部弹出软键盘，支持与 Input 组件直接联动弹起。

---

代码示例

1. 结合 Input 输入框直接联动

设置 use-keyboard 开启虚拟键盘联动。点击输入框即可平滑弹起底部安全键盘，并显示实时打字闪烁光标。

<template>
  <mu-input
    v-model="account"
    label="数字账号"
    placeholder="点击唤起安全数字键盘"
    use-keyboard
    keyboard-mode="number"
    keyboard-title="安全数字键盘"
  />

  <mu-input
    v-model="carNumber"
    label="车辆号牌"
    placeholder="点击唤起车牌号键盘"
    type="car"
  />
</template>

<script setup>
import { ref } from 'vue'
const account = ref('')
const carNumber = ref('')
</script>

---

2. 车牌号专用键盘 (Car Plate)

设置 mode="car" 开启车牌号专用模式。系统智能判断：输入首字自动展现 31 省/直辖市简称；输入后续字符自动切为 数字与英文字母/特种字。

<template>
  <mu-button type="primary" block @click="show = true">
    {{ carValue ? `车牌: ${carValue}` : '调出车牌号专用键盘' }}
  </mu-button>

  <mu-keyboard
    v-model:show="show"
    v-model:value="carValue"
    mode="car"
    title="请输入真实车牌号码"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const carValue = ref('')
</script>

---

3. 带小数点金额键盘 (Decimal)

设置 decimal 属性开启左下角小数点按键 . ，常用于金额录入。

<template>
  <mu-keyboard
    v-model:show="show"
    v-model:value="amount"
    decimal
    title="请输入交易金额"
  />
</template>

---

4. 身份证/扩展按键 (ID Card)

设置 mode="idcard" 自动在左下角补全 X 快捷键，上限自动设为 18 位。

<template>
  <mu-keyboard
    v-model:show="show"
    v-model:value="idCard"
    mode="idcard"
    title="身份证安全键盘"
  />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show	控制虚拟键盘弹窗的显示与隐藏	Boolean	true | false	false
v-model:value	当前已输入的文本字符串 (同 value)	String	-	''
mode	键盘类型模式	String	number | idcard | car	'number'
title	顶部工具栏标题字符串	String	-	''
maxlength	限制最大输入字符长度 (0 表示无限制)	Number	-	0
decimal	是否开启左下角小数点 . 键 (仅 number 模式生效)	Boolean	true | false	false
extraKey	自定义左下角额外键名字符串 (如 'X')	String	-	''
showToolbar	是否显示顶部工具栏	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
update:value	v-model:value 双向绑定更新	(value: string)
input	按下按键时触发	(key: String)
change	输入结果更新改变时触发	(value: String)
delete	按下删除键时触发	-
confirm	点击“完成”确认关闭时触发	(value: String)
close	键盘动画彻底收起关闭时触发	-