主题
LimeSlider 滑块组件
一个功能丰富的滑块组件,用于在给定的范围内选择一个值或一个范围。支持单滑块、双滑块、垂直方向、刻度标记等多种配置,可用于音量调节、价格区间选择、温度设置等多种场景。组件提供了丰富的自定义选项,可以满足各种复杂的界面设计需求。
插件依赖:
lime-shared
、lime-style
文档链接
📚 组件详细文档请访问以下站点:
安装方法
代码演示
基础使用
html
<l-slider v-model="value" @change="onChange" />
1
js
const value = ref(50);
const onChange = (value: number) => {
console.log('当前值:' + value)
};
1
2
3
4
2
3
4
双滑块
添加 range
属性就可以开启双滑块模式,确保 value
的值是一个数组。
html
<van-slider v-model="value" :range="true" @change="onChange" />
1
js
// 双滑块模式时,值必须是数组
const value = ref([10, 50]);
const onChange = (value: number[]) => {
console.log('当前值:' + value)
};
1
2
3
4
5
2
3
4
5
指定范围
通过设置 min
属性和max
达到指定范围。
html
<l-slider v-model="value" :min="-50" :max="50"/>
1
禁用
通过设置 disabled
属性禁用。
html
<l-slider v-model="value4" :disabled="true" />
1
指定步长
通过设置 step
属性值指定步长。
html
<l-slider v-model="value" :step="10" />
1
自定义样式
通过 thumb-size
属性设置按钮尺寸,通过rail-size
设置进度条高度,通过track-color
可设置进度条激活态颜色。
html
<l-slider v-model="value" thumb-size="30px" rail-size="4px" track-color="#34c471" />
1
自定义按钮
通过 startThumb
插槽自定义按钮。
html
<l-slider v-model="value" rail-size="4px" track-color="#ffb400">
<template #startThumb>
<text class="custom-thumb">{{ value }}</text>
</template>
</l-slider>
1
2
3
4
5
2
3
4
5
垂直方向
设置 vertical
属性后,滑块会垂直展示,且高度为 100% 父元素高度。
html
<l-slider v-model="value" :range="true" :vertical="true"/>
1
反向滑块
设置reverse属性,使滑块反向移动。
html
<l-slider v-model="value" reverse></l-slider>
1
禁止越界
设置noCross属性,在双滑块模式下禁止两个滑块交叉。
html
<l-slider v-model="rangeValue" range noCross></l-slider>
1
快速预览
导入插件后,可以直接使用以下标签查看演示效果:
html
<!-- 代码位于 uni_modules/lime-slider/components/lime-slider -->
<lime-slider />
1
2
2
插件标签说明
标签名 | 说明 |
---|---|
l-slider | 组件标签 |
lime-slider | 演示标签 |
Vue2使用说明
main.js中添加以下代码:
js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
1
2
3
4
2
3
4
详细配置请参考官方文档:Vue Composition API
API文档
Props 属性说明
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
modelValue | 当前值,可以使用 v-model 双向绑定 | number | number[] | - |
value | 当前值(兼容写法) | number | number[] | - |
min | 最小值 | number | 0 |
max | 最大值 | number | 100 |
step | 步长 | number | 1 |
range | 是否开启双滑块模式 | boolean | false |
disabled | 是否禁用滑块 | boolean | false |
reverse | 是否反向移动 | boolean | false |
readonly | 是否为只读状态 | boolean | false |
noCross | 是否禁止双滑块交叉 | boolean | false |
vertical | 是否垂直展示 | boolean | false |
thumbSize | 滑块大小 | string | - |
thumbColor | 滑块颜色 | string | - |
thumbBorderColor | 滑块边框颜色 | string | - |
thumbRadius | 滑块圆角 | string | - |
railColor | 轨道颜色 | string | - |
railRadius | 轨道圆角 | string | - |
railSize | 轨道大小 | string | - |
trackColor | 已选择部分的轨道颜色 | string | - |
Events 事件
事件名 | 说明 | 回调参数 |
---|---|---|
change | 值变化时触发 | value: number | number[] |
dragStart | 开始拖动时触发 | value: number | number[] |
dragEnd | 结束拖动时触发 | value: number | number[] |
Slots 插槽
名称 | 说明 |
---|---|
button | 自定义滑块按钮 |
主题定制
组件提供了以下CSS变量,可用于自定义样式:
变量名称 | 默认值 | 描述 |
---|---|---|
--l-slider-rail-size | 4px | 轨道大小 |
--l-slider-rail-color | rgba(0, 0, 0, 0.04) | 轨道颜色 |
--l-slider-track-color | #1677ff | 已选择部分的轨道颜色 |
--l-slider-disabled-color | $primary-color-3 | 禁用状态颜色 |
--l-slider-dot-size | 20px | 滑块大小 |
--l-slider-dot-color | white | 滑块颜色 |
--l-slider-dot-radius | 50% | 滑块圆角 |
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者:
支付宝赞助 | 微信赞助 |
---|---|
![]() | ![]() |