更新记录

1.0.1（2026-08-21） 下载此版本

量杯刻度样式优化

1.0.0（2026-08-21） 下载此版本

支持v‑model双向绑定水量 ✅ majorScales、minorScales外部传入自定义刻度 ✅ 全部尺寸、颜色、字号、单位颜色props可配置 ✅ 支持拖拽调节水位，对外暴露增减、设置水量方法 ✅ 兼容App、H5、微信小程序等多端

平台兼容性

uni-app(5.0)

MeasuringCup 可配置量杯组件

uniapp vue3‑setup 可拖拽量杯UI组件，刻度、尺寸、颜色全部外部传入配置。

平台兼容性

• App‑vue、H5、微信小程序、支付宝小程序、抖音小程序

安装

uni_modules直接导入，无需额外npm依赖。

Props 清单（全部可外部传入）

基础

v‑model：当前水量 maxWater：最大量程 step：步进值 majorScales：主刻度数组 minorScales：不显示文字的辅助刻度数组 dragAmount：是否显示拖拽增量提示

颜色

measuringToolFrame：杯边框颜色 graduationMark：刻度线颜色 scaleValueColor：刻度文字颜色 fillColor：水位颜色 cupBodyBg：杯体背景 resultColor：读数数字颜色 unitColor：独立单位文字颜色

尺寸

containerWidth/containerHeight：外层容器宽高 cupBodyWidth/cupBodyHeight：杯体宽高（核心计算依据） cupRimTop/cupRimOffset/cupRimHeight：杯口位置大小 cupBaseWidth/cupBaseHeight：底座宽高 highlightLeft/highlightWidth：玻璃高光

字体 & 位置

scaleFontSize：刻度字号 numberFontSize：读数数字字号 unitFontSize：单位字号 unitMarginLeft：数字与单位间距 dragInfoFontSize/dragInfoMarginBottom：拖拽提示 infoBottom：读数区域距离杯底偏移 说明：clip‑path梯形路径写死在 css 中，如果后续需要动态修改梯形斜角，我可以帮你把 clip‑path 也抽成 props。

事件

update:modelValue v‑model 自动触发 water‑change(amount) 水量变化回调 组件暴露方法（ref 调用） increaseWater() 增加 step 水量 decreaseWater() 减少 step 水量 setWaterAmount(val) 设置指定水量

使用示例