LimeUI+1.2.0

主题

LimeRuler 刻度尺组件 ​

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

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

自定义范围 ​

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

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

垂直方向 ​

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

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

自定义刻度间隔 ​

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

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

自定义样式 ​

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

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

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-ruler组件标签
lime-ruler演示标签

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
scope标尺量程（格式：[最小值, 最大值]，优先级高于min/max）number[][0, 100]
step主刻度间隔number10
unit每单位对应像素值number1
min最小值（若scope存在则忽略）number0
max最大值（若scope存在则忽略）number100
fontSize刻度文字尺寸（单位px）number11
stepTextPosition刻度文字位置（垂直模式无效）'top' | 'bottom''top'
vertical垂直方向展示booleanfalse
lineLengths刻度线长度（支持层层级级，格式：[主刻度长, 次刻度长...]）number[][10, 5]
padding内边距（格式：[水平内边距，垂直内边距] 或 [左, 右, 上, 下]）number[][20, 14]
lineColor默认线条颜色string-
textColor默认文本颜色string-
outRangeLineColor超出范围刻度线颜色string-
outRangeTextColor超出范围文本颜色string-

Events 事件 ​

事件名说明回调参数
change拖拽选择值时触发value: number

Slots 插槽 ​

名称说明
default自定义指针样式

主题定制 ​

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

变量名称默认值描述
rulerLineColor#858B9C刻度线颜色
rulerTextColor#C5CAD5刻度文本颜色
rulerOutRangeLineColor#E2E4EA超出范围刻度线颜色
rulerOutRangeTextColor#E2E4EA超出范围文本颜色

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码