u-code-input是多端兼容的验证码输入组件，支持box/line模式、细边框、颜色定制、●掩码、自动聚焦及自定义键盘联动，避免手写伪输入框导致的失焦、光标错位等问题。
直接用 u-code-input 或 uv-code-input 是最省事、多端兼容性最好的方式；自己手写 6 个 input + v-for 拼出来的“伪输入框”，在小程序里容易失焦、iOS 上光标错位、nvue 下无法触发键盘，不推荐作为主力方案。
用 uView / uv-ui 的 u-code-input 快速定制样式
它原生支持 box（方框）、line（横线）两种模式，所有视觉参数都可配，不需要 hack DOM 或隐藏真实 input：
-
mode="box"+hairline可实现细边框+无阴影的极简风格 -
color控制数字颜色，borderColor控制边框色，space调整方框间距（比如设为0紧凑排列） - 设
dot后显示 ●，但@change和@finish回调仍拿到明文，适合短信验证码场景 - 注意：H5 和 App(vue) 默认唤起系统键盘；若搭配 uView 自定义键盘，必须加
disabled-keyboard
示例：<u-code-input v-model="code" mode="box" :maxlength="6" hairline :space="0" color="#333" bordercolor="#e5e5e5" dot></u-code-input>
为什么别用“隐藏 input + 点击 view 聚焦”这种老方案
这种方案在微信小程序里问题最多：
- iOS 微信下，
input设position: absolute; left: -100%后，focus()可能不弹键盘，或弹出后立刻收起 - Android 小程序中，连续点击不同方框时，
blur→focus间隙会导致键盘闪退 - nvue 页面不支持
adjust-position，键盘上推逻辑失效，页面被遮挡 - 无障碍访问（如读屏）完全不可用，
view不是可聚焦元素
uv-code-input 在 Vue3 + nvue 下的注意事项
如果你项目已升级到 Vue3 并启用 nvue 渲染（尤其 App 端），需确认：
- 组件库版本 ≥ 3.2.0（旧版
u-code-input在 nvue 下不渲染 input 实例） -
v-model绑定的变量必须是响应式ref，不能是普通对象属性（Vue3 setup 语法糖里要写const code = ref('')） - 不要在
@finish回调里直接调 API —— 小程序真机上可能因异步时机导致code值仍是空字符串，建议加一层防抖或 nextTick 确保取值
真正需要“自定义风格”的地方，其实是错误态反馈和键盘联动逻辑，而不是重造输入框本身。方框颜色、● 替换、自动聚焦这些，uv-code-input 都已覆盖；硬要改底层渲染结构，反而会掉进多端兼容的坑里。
