Vue 3 封装带单位数字输入组件需分离输入框与单位显示区，用 parser 解析输入字符串为数值、formatter 按精度格式化回显，通过 modelValue prop 和 update:modelValue 事件支持 v-model 规范，并兼容插槽单位与精度联动。
在 Vue 3 中封装带单位的数字输入组件（如「120 kg」「3.5 m」），关键不是简单加个后缀文字，而是让单位参与交互逻辑：输入时忽略单位、提交时保留单位、校验仍基于纯数值。下面从结构、行为、集成三方面讲清楚怎么做。
结构上：输入框 + 单位显示区分离设计
不推荐用 input 的 placeholder 或拼接字符串模拟单位，那样会导致值获取混乱、光标错位、粘贴异常。正确做法是：
- 用原生
<input type="text">承载用户可编辑内容（只含数字和小数点） - 单位（如
"kg"）放在右侧固定区域，用<span>或插槽渲染，不可编辑也不参与 v-model - 内部用
ref分别管理数值（number类型）和单位（string类型） - 对外暴露
v-model:value绑定数值，另提供unitprop 控制单位显示
行为上：输入解析与格式化要双向可控
用户输入 "12.5kg" 或粘贴 "80 " 时，组件需自动剥离单位、转为数字，并按精度截断。核心靠两个函数：
-
parser：把输入字符串转成合法数字，例如
(str) => parseFloat(str.replace(/[^\d.-]/g, '')) || 0 -
formatter：把数值转为带单位的展示字符串，例如
(val) => `${Number(val).toFixed(precision)} ${unit}` - 配合
@input和@blur时机调用：输入中实时解析并更新数值；失焦时格式化回显，避免用户看到"12.5000000001 kg" - 支持 step、min、max 校验，单位不参与限制逻辑——比如
min=0是指数值 ≥ 0，不是字符串比较
集成上：适配表单体系与 v-model 规范
要让组件能被通用表单（如 ant-design-vue 或自研 ConfigForm）识别，需满足 Vue 3 的 v-model 约定：
立即学习“前端免费学习笔记（深入）”；
- 定义
modelValueprop 接收数值，触发update:modelValue事件同步变更 - 若使用
defineModel()（Vue 3.4+），可直接声明const modelValue = defineModel<number>()</number>，更简洁 - 在配置化表单中注册为
type: 'number-with-unit'，通过componentMap映射到该组件 - 单位支持传入字符串（
unit="cm"）或插槽（<template #unit><icon-cm /></template>），兼顾灵活性和国际化
不复杂但容易忽略的是单位与精度联动——比如设置 precision=1 且 unit="°C"，输入 25.67 应显示为 "25.7 °C"，而不是 "25.67°C"。formatter 必须严格按 precision 四舍五入后再拼单位。
