Vue 3 中自定义表单组件怎么封装货币格式化输入-Vue.js-PHP中文网

Vue 3 封装货币格式化表单组件需兼顾输入体验与数据一致性：显示千分位小数（如1,234.56），绑定纯数字（如1234.56），支持空值、负数及焦点切换；推荐用vue-currency-input封装，或手动实现双向格式化逻辑，亦可集成Element Plus/Naive UI或使用v-thousand指令。

vue 3 中自定义表单组件怎么封装货币格式化输入

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 管理内部显示值（字符串），modelValue prop 接收数字
@focus 时把 modelValue 转为纯数字字符串（如 1234.56），赋给内部 input
@input 时实时清洗输入：移除非数字字符（保留 - 和 .），限制小数位，再更新内部 ref
@blur 时调用格式化函数（如 Intl.NumberFormat 或正则千分位），同时 emit('update:modelValue', Number(cleaned))
注意处理空输入、非法字符粘贴、连续小数点等异常输入