vue 3 手机号分段输入组件通过三段 input 实现 3-4-4 结构，支持自动跳转、backspace 回退、粘贴数字提取与格式化，并利用 definemodel 或 v-model 同步完整 11 位手机号。
在 Vue 3 中实现手机号分段输入（如 138-1234-5678），核心是封装一个受控的自定义表单组件，支持光标定位、删除逻辑、自动跳转与粘贴处理。关键不在于“分段显示”，而在于“输入行为控制”和“值同步”。
一、结构设计：用多个 input 实现视觉分段
将手机号拆为 3 段（3-4-4）：分别绑定三个 <input>，用 ref 精确控制焦点和光标位置。
- 每个 input 设置
maxlength（如 3 / 4 / 4），禁用非数字输入 - 用
v-model或:value + @input实现双向绑定（推荐使用v-model配合defineModel） - 段间用固定字符（如
-）分隔，不作为可编辑内容，仅用于展示
二、输入逻辑：自动跳转与回退
监听每个 input 的 @input 和 @keydown.delete/@keydown.backspace：
- 当前段填满 → 自动 focus 下一段（需判断下一段是否为空或已满）
- 当前段为空且按 Backspace → focus 上一段末尾（注意光标位置要设到上一段最后）
- 删除中间字符时，需手动维护光标偏移，避免跳段错乱
三、粘贴与格式化：统一拦截并解析
禁止直接粘贴进某一段，而是监听根容器的 @paste，统一处理：
- 阻止默认粘贴，读取剪贴板文本，提取所有数字
- 截取前 11 位，按 3-4-4 分配到各段
- 依次触发各段的赋值，并 focus 最后一段（或根据长度决定）
- 若粘贴内容不足 11 位，仍按规则填充，不报错
四、v-model 支持与表单集成
使用 defineModel（Vue 3.4+）或 defineEmits(['update:modelValue']) + props.modelValue 兼容旧版：
- 内部把三段值拼成完整 11 位手机号（如
val1 + val2 + val3），作为 model 值向外同步 - 接收外部传入的完整手机号时，自动拆分到各段（支持初始值和动态更新）
- 配合
useVModel或computed双向映射，保持响应式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
