Vue 3 银行卡号自动格式化需用 v-model 绑定格式化值，@input 解析纯数字并分组加空格，ref 记录/恢复光标位置，@paste/@keydown.delete 处理粘贴删除，限制总长≤23字符。
在 Vue 3 中实现银行卡号自动格式化，核心是监听输入、控制光标位置、按规则分组（通常每 4 位加空格），同时兼容删除、粘贴、选中替换等操作。关键在于用 v-model 的双向绑定 + input 事件 + 手动同步光标位置，避免格式化导致光标跳到末尾。
使用 v-model + input 事件做实时格式化
不推荐直接用 v-model 绑定原始值并靠 computed setter 格式化，因为会丢失光标位置。正确做法是：
- 用
v-model绑定格式化后的显示值（如"1234 5678 9012 3456"） - 在
@input中解析出纯数字（value.replace(/\s/g, '')），校验长度（通常 ≤ 19 位），再按每 4 位插入空格 - 用
ref拿到 input 元素，调用setSelectionRange恢复光标位置（需记录格式化前的光标位置）
精准维护光标位置（关键难点）
用户在中间修改时，比如把 "1234 5678 9012 3456" 改成 "1234 5678 9012 345X"，光标应在最后；但如果在第 5 位插入，原光标在 "1234| 5678..."，格式化后应落在 "1234| 5678..." 对应位置。实现逻辑：
- 在
input触发前，用el.selectionStart记录原始光标位置 - 根据原始光标位置，映射到纯数字字符串中的索引（跳过空格）
- 格式化生成新字符串后，再把该数字索引转回带空格字符串中的位置（每 4 位后加 1 个空格，所以偏移 =
Math.floor(index / 4)） - 调用
el.setSelectionRange(newPos, newPos)
处理粘贴与删除的边界情况
用户可能粘贴一串数字（如 "1234567890123456"），或全选后输入新号码，也可能按 Backspace 删除空格。建议：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 粘贴时用
@paste.prevent拦截，event.clipboardData.getData('text')取纯数字，再格式化 - 删除时（
event.inputType === 'deleteContentBackward'），若光标前是空格，应连同空格一起删（即退格跳过空格） - 始终限制最大长度：纯数字 ≤ 19 位（常见银行卡号长度），格式化后字符串长度 ≤ 23（19 + 4 个空格）
封装成可复用的自定义组件（示例结构）
用 defineComponent + ref + onMounted，暴露 v-model:value 和 @update:value，内部管理格式化逻辑。模板中：
<input ref="inputRef" :value="formattedValue" @input="onInput" @paste.prevent="onPaste" @keydown.delete="onDelete" maxlength="23" />
脚本中维护 rawValue（纯数字）、formattedValue（带空格），所有更新都走 updateRawValue 方法，保证单向数据流。
