vue3-measuring-scalevue3-measuring-scale是一款为Vue 3开发的高性能、高定制性、交互优雅的Canvas 刻度尺标尺选择器组件库。它专为移动端及大屏可视化表单场景设计可用于身高、体重、温度、年龄等任何连续或离散数值的直观滑动选择。在线 Demo 演示✨ 特性⚡Canvas 渲染核心部分完全由 HTML Canvas 绘制避免大量 DOM 渲染即使大范围数值交互也极为流畅。高清显示支持自动适配高分屏Retina智能检测并应用window.devicePixelRatio缩放避免线条模糊。物理惯性滑动内置甩拽减速运动学模型Momentum Physics支持随手势甩动滑行。自动磁吸对齐当惯性滑动结束或拖拽释放时会自动回弹并磁吸对齐到最接近的有效步长step数值。⚙️高精度防噪内置高精度过滤截断机制彻底根治 JavaScript 浮点数在运算时产生的类似62.30000000000004等浮点噪点。双向布局支持水平Horizontal与垂直Vertical两套布局朝向。内置主题与高定制性支持白昼light/ 深色dark两套内置配色系统支持动态调整指针颜色、刻度间距、大刻度间隔并支持完全自定义的标签文字格式化函数。支持滚轮/触控板支持鼠标滚轮与笔记本双指滚动操作。 安装使用您喜爱的包管理器安装组件包# npmnpminstallvue3-measuring-scale# yarnyarnaddvue3-measuring-scale# pnpmpnpmaddvue3-measuring-scale 快速上手1. 全局注册使用作为插件在main.ts/main.js中注册插件import{createApp}fromvueimportAppfrom./App.vue// 导入组件包与样式文件importVue3MeasuringScalefromvue3-measuring-scaleimportvue3-measuring-scale/dist/style.cssconstappcreateApp(App)// 注册插件app.use(Vue3MeasuringScale)app.mount(#app)全局注册后您可以在项目任何地方直接使用MeasuringScale /组件script setup langts import { ref } from vue const weight ref(72.5) /script template div classscale-box MeasuringScale v-modelweight :min30 :max150 :step0.1 unitkg / /div /template style .scale-box { width: 100%; height: 120px; } /style2. 局部导入组件如果您不需要全局注册可以直接进行局部按名导入script setup langts import { ref } from vue import { MeasuringScale } from vue3-measuring-scale import vue3-measuring-scale/dist/style.css const height ref(175) /script template div classscale-box MeasuringScale v-modelheight :min100 :max220 :step1 unitcm :verticaltrue / /div /template style .scale-box { width: 200px; height: 400px; } /style API 参考属性 (Props)属性名类型默认值说明v-model(modelValue)number必填双向绑定的当前选中数值。minnumber0尺子允许的最小值。maxnumber100尺子允许的最大值。stepnumber1刻度步长精度如0.1表示一位小数精度5表示以 5 递增。支持浮点数。ruleWidthnumber8最小相邻刻度线之间的像素间距单位px。增大此值会使尺子显得更稀疏反之更紧凑。unitstring数值显示区域的单位后缀例如kg、cm、℃。verticalbooleanfalse是否为垂直刻度尺布局。false为水平朝向true为垂直朝向。themelight | darklight内置配色主题。light浅色适用于白底和dark深色适用于暗色背景。pointerColorstring#3b82f6中间红色准星指示针的自定义颜色支持各种 Hex/RGB/HSL 色值。lineColorstring刻度线和水平基线的自定义颜色。为空时会自动根据主题明暗色计算半透明色。textColorstring大刻度文本标注的自定义颜色。为空时会自动根据主题计算文字色。showValuebooleantrue是否在标尺内部上方/侧边自动渲染当前的数值预览框。tickIntervalnumber10大刻度线间隔。表示每隔多少个step步长绘制一条带有数值标签的的长刻度线。labelFormatter(val: number) stringundefined自定义刻度线下的数值文本格式化函数。可以用来将数值转换成月份、定制文字等。事件 (Events)事件名参数说明update:modelValuevalue: number触发双向绑定更新。在滑动过程中值会随着当前滑过的步长位置以高精度输出。changevalue: number用户释放手指且刻度尺执行完磁吸回弹对齐动画并最终静止后触发。参数为最终落点的数值。️ 本地开发与测试如果您希望下载该项目并在本地进行二开调试克隆项目并安装依赖pnpminstall启动本地交互式验证页面pnpmrun dev启动后可在浏览器中打开http://localhost:5173/访问可视化测试大屏。在此大屏中您可以调节控制面板中的各项属性并实时预览。打包生产包pnpmrun build该命令会利用 Vite 编译出库的 ES 及 UMD 代码并自动通过vue-tsc运行类型检查于dist/生成所有模块的.d.ts类型声明文件。 授权协议MIT License