更新记录

0.0.3（2025-12-25）

• feat: 增加更多配置

0.0.1（2024-08-02）

• init

平台兼容性

uni-app(4.85)

uni-app x(4.85)

其他

lime-ruler 刻度尺组件

一个功能丰富的刻度尺组件，用于展示可交互的刻度尺，支持水平和垂直方向，可自定义刻度和样式。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求，适用于身高体重测量、温度计、音量调节等多种场景。

文档链接

📚 组件详细文档请访问以下站点：

• 刻度尺组件文档 - 站点1
• 刻度尺组件文档 - 站点2
• 刻度尺组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-ruler
2. 导入后可能需要重新编译项目
3. 在页面中使用l-ruler组件

代码演示

基础用法

最简单的刻度尺组件用法，只需要设置v-model即可。

<l-ruler v-model="value"></l-ruler>

自定义范围

设置刻度尺的最小值和最大值。

<l-ruler v-model="value" :scope="[0, 200]"></l-ruler>

垂直方向

设置刻度尺为垂直方向显示。

<l-ruler v-model="value" :vertical="true"></l-ruler>

自定义刻度间隔

设置主刻度间隔和单位像素值。

<l-ruler 
  v-model="value" 
  :step="20"
  :unit="2"
></l-ruler>

自定义样式

自定义刻度线长度、颜色和文字位置。

<l-ruler 
  v-model="value" 
  :lineLengths="[15, 8]"
  lineColor="#1989fa"
  textColor="#333333"
  stepTextPosition="bottom"
></l-ruler>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-ruler/components/lime-ruler -->
<lime-ruler />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

可通过lime-config-provider组件设置

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助