更新记录

1.0.2（2025-02-19） 下载此版本

修改单位转换精度，将原始单位和值暂存，换算到基准单位值，再换算到新单位值。

1.0.1（2025-02-15） 下载此版本

修改单位类型默认值

1.0.0（2025-02-15） 下载此版本

1.0.0

平台兼容性

yjyl-input-unit 单位转换组件使用说明

功能特性 支持双向数值绑定 内置单位换算逻辑（含温度特殊处理） 支持单位循环切换/弹窗选择两种模式 兼容 Vue2/Vue3 和 UniApp 多平台 支持自定义单位显示 可配置小数位数精度

符合uni-modules标准，直接使用

事件说明 | 事件名称 | 说明 | 回调参数 | | input | 数值变化时触发 | (newValue: number) | | update:unitOrder | 单位序号变化时触发 | (newOrder: number) | | conversion | 完成单位转换时触发 | { initialValue, newValue, oldUnit, newUnit, oldOrder, newOrder } 的 Object | 使用示例 基本用法 vue

禁用转换模式

<UniUnitConverter v-model="fixedValue" :unit-type="weight" :enable-convert="false" user-defined :user-definedunit-name="'特殊单位'" /> 事件处理 vue 复制

API 需自己开发，按照下面的数据格式进行组织，参考unitData.js 组件依赖 listSysUnitConvert API 获取单位数据，需实现以下格式的接口：

javascript { rows: [ { id: 1, unitType: 'length', unitName: '米(m)', conversionFactor: 1, baseUnit: 'Y', unitOrder: 0 }, // ...其他单位数据 ] } 样式调整 可通过以下 CSS 类名自定义样式：

.unit-converter - 组件容器

.input-field - 输入框

.unit-label - 单位标签

.unit-selector - 单位选择器

.unit-option - 单位选项

平台差异

小程序端使用 longpress 事件触发选择器（长按代替双击）

H5 端自动适配点击事件

单位转换规则

温度单位需按约定顺序定义：

javascript 复制 [ { unitOrder: 0, unitName: '℃' }, // 摄氏度 { unitOrder: 1, unitName: '℉' }, // 华氏度 { unitOrder: 2, unitName: 'K' } // 开尔文 ] 自定义单位时需确保与现有换算逻辑兼容

常见问题 Q1: 单位选择器不显示

检查 enableConvert 是否为 true

确认单位数据加载成功

查看控制台是否有 API 错误

Q2: 数值更新不及时

确保使用 v-model 进行双向绑定

检查小数位数配置是否符合预期

确认没有在父组件中覆盖转换后的值

Q3: 样式显示异常

检查是否父容器有冲突的布局样式

确认单位标签宽度计算正确（通过 updateInputWidth 方法）

在小程序端添加 !important 覆盖默认样式