CodeInput 验证码 / 车牌号输入

用于手机短信验证码、支付交易密码以及车牌号码录入的多格拆分输入控件，支持新能源车牌专属插槽与自定义虚拟键盘弹起。

---

代码示例

1. 车牌号九宫格模式 (Car Plate Grid)

设置 mode="car" 开启车牌号输入框形态。默认生成 8 位框（7 位燃油车 + 第 8 位 + 新能源 虚线插槽与绿色徽标），点击格框自动弹起车牌号专用键盘。

<template>
  <mu-code-input v-model="carNumber" mode="car" @finish="handleFinish" />
</template>

<script setup>
import { ref } from 'vue'
const carNumber = ref('京A88888')
const handleFinish = (val) => {
  console.log('车牌号输入完成:', val)
}
</script>

---

2. 基础 4 位验证码 (Basic)

使用 v-model 绑定当前输入的字符串，使用 length 指定验证码位数（如 4 位）。输入完成后自动触发 @finish 事件。

<template>
  <mu-code-input v-model="code" :length="4" @finish="handleFinish" />
</template>

<script setup>
import { ref } from 'vue'
const code = ref('')
const handleFinish = (val) => {
  console.log('验证码输入完成:', val)
}
</script>

---

3. 6 位密码/掩码模式 (Mask Password)

设置 mode="password" 或 mask 开启密文黑点显示，常用于支付密码与验证码。

<template>
  <mu-code-input v-model="password" :length="6" mode="password" />
</template>

---

4. 下划线形态 (Underline)

设置 shape="underline" 切换为极简下划线分割样式。

<template>
  <mu-code-input v-model="code" :length="4" shape="underline" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	当前输入的验证码/车牌号字符串	String	-	''
mode	组件输入模式	String	code | password | car	'code'
length	验证码位数格数 (car 模式默认 8 位)	Number	-	4
shape	格框外观形态	String	radius | square | round | underline	'radius'
mask	是否使用圆点密文遮罩隐藏	Boolean	true | false	false
useVirtualKeyboard	是否启用底部自定义虚拟键盘	Boolean	true | false	false
autoFocus	是否自动聚焦调出键盘	Boolean	true | false	false
keyboardTitle	虚拟键盘顶部标题	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
change	每次输入字符改变时触发	(value: String)
finish	当输入位数达到 length 完成时触发	(value: String)
update:modelValue	双向绑定更改变	(value: String)