Vue 3 封装货币格式化表单组件需兼顾输入体验与数据一致性：显示千分位小数（如1,234.56），绑定纯数字（如1234.56），支持空值、负数及焦点切换；推荐用vue-currency-input封装，或手动实现双向格式化逻辑，亦可集成Element Plus/Naive UI或使用v-thousand指令。
Vue 3 中封装带货币格式化的自定义表单组件，核心是兼顾「输入体验」和「数据一致性」：用户看到的是千分位+小数（如 1,234.56），但绑定值必须是纯数字（如 1234.56），且要支持空值、负数、编辑焦点切换等边界情况。
用 vue-currency-input 封装轻量输入框
这是最推荐的起点方案，官方维护、TypeScript 友好、开箱即用：
- 安装依赖：
yarn add vue-currency-input（v4+ 支持 Vue 3） - 创建
CurrencyInput.vue，使用useCurrencyInput组合式 API - 通过
options配置小数位、前缀、千分位符号等，例如：{ currency: '', precision: 2, allowNegative: true, autoDecimalMode: true } - 用
watchDebounced（来自 @vueuse/core）防抖同步数值，避免频繁触发update:modelValue - 组件内不直接操作 DOM，所有格式化交由库处理，逻辑干净可测
手动实现双向格式化逻辑（无第三方依赖）
适合对包体积敏感或需深度定制的场景，关键在「聚焦时还原原始数字，失焦时格式化显示」：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 用
ref管理内部显示值（字符串），modelValueprop 接收数字 -
@focus时把modelValue转为纯数字字符串（如1234.56），赋给内部 input -
@input时实时清洗输入：移除非数字字符（保留-和.），限制小数位，再更新内部 ref -
@blur时调用格式化函数（如Intl.NumberFormat或正则千分位），同时emit('update:modelValue', Number(cleaned)) - 注意处理空输入、非法字符粘贴、连续小数点等异常输入
配合 Element Plus / Naive UI 做增强集成
若项目已用主流 UI 库，可基于其 el-input 或 n-input 封装，复用样式与交互：
立即学习“前端免费学习笔记（深入）”；
- 用
v-model:value控制显示内容，@blur触发数值校验与格式化回写 - 通过
suffix插槽添加 ¥ 或 $ 符号，避免混入输入值影响解析 - 结合
el-form-item的校验规则，扩展金额范围校验（如最小值 ≥ 0、最大值 ≤ 99999999.99） - 支持
disabled、clearable、placeholder等原生属性透传
全局指令方式（适合快速接入存量表单）
不封装组件，而是注册一个 v-thousand 指令，对普通 <input> 自动启用格式化：
- 指令中监听
focus和blur，用Intl.NumberFormat格式化显示值 - 绑定
input事件做输入过滤，防止用户输入非法字符 - 配合
v-model.number保证绑定值为 number 类型 - 适合已有大量表单需低成本升级，但复用性和类型安全不如组件方案
