更新记录
0.0.3(2024-10-21) 下载此版本
- chore: 更新文档
0.0.2(2024-10-21) 下载此版本
- chore: 兼容vue2
0.0.1(2024-10-21) 下载此版本
- init
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.26 app-vue app-uvue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
lime-slider 滑动输入条
- 滑动型输入器,展示当前值和可选范围、区间、档位。兼容uniapp/uniappx
- 插件依赖
lime-shared
、lime-style
,不喜勿下
安装
在插件市场导入即可,首次导入可能需要重新编译
代码演示
基础使用
<l-slider v-model="value" @change="onChange" />
const value = ref(50);
const onChange = (value: number) => {
console.log('当前值:' + value)
};
双滑块
添加 range
属性就可以开启双滑块模式,确保 value
的值是一个数组。
<van-slider v-model="value" :range="true" @change="onChange" />
// 双滑块模式时,值必须是数组
const value = ref([10, 50]);
const onChange = (value: number[]) => {
console.log('当前值:' + value)
};
指定范围
通过设置 min
属性和max
达到指定范围。
<l-slider v-model="value" :min="-50" :max="50"/>
禁用
通过设置 disabled
属性禁用。
<l-slider v-model="value4" :disabled="true" />
指定步长
通过设置 step
属性值指定步长。
<l-slider v-model="value" :step="10" />
自定义样式
通过 thumb-size
属性设置按钮尺寸,通过rail-size
设置进度条高度,通过track-color
可设置进度条激活态颜色。
<l-slider v-model="value" thumb-size="30px" rail-size="4px" track-color="#34c471" />
自定义按钮
通过 start-thumb
插槽自定义按钮。
<l-slider v-model="value" rail-size="4px" track-color="#ffb400">
<template #start-thumb>
<text class="custom-thumb">{{ value }}</text>
</template>
</l-slider>
垂直方向
设置 vertical
属性后,滑块会垂直展示,且高度为 100% 父元素高度。
<l-slider v-model="value" :range="true" :vertical="true"/>
插件标签
- 默认 l-slider 为 component
- 默认 lime-slider 为 demo
-
关于vue2的使用方式
- 插件使用了
composition-api
, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置 - 关键代码是: 在main.js中 在vue2部分加上这一段即可.
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前分值 | number | - |
value | 当前分值 | number | - |
max | 最大值 | number | 100 |
min | 最小值 | number | 0 |
step | 步长 | number | 0 |
step | 步长 | number | 1 |
vertical | 是否垂直展示 | boolean | false |
disabled | 是否禁用滑块 | boolean | false |
range | 是否开启双滑块模式 | boolean | false |
thumbSize | 滑块按钮大小 | string | - |
thumbColor | 滑块按钮颜色 | string | - |
thumbBorderColor | 滑块按钮描边颜色 | string | - |
thumbRadius | 滑块按钮圆角 | string | - |
railColor | 进度条轨道颜色 | string | - |
railRadius | 进度条轨道圆角 | string | - |
railSize | 进度条轨道尺寸 | string | - |
trackColor | 进度条激活态颜色 | string | - |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当前分值变化时触发的事件 | currentValue: number|number[] |
Slots
名称 | 说明 |
---|---|
start-thumb | 左边插槽 |
end-thumb | 右边插槽 |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式)。uvue app无效。
名称 | 默认值 | 描述 |
---|---|---|
--l-slider-rail-size: | 20px | - |
--l-slider-rail-color: | $fill-2 | - |
--l-slider-rail-color: | 99px | - |
--l-slider-track-color: | $primary-color | - |
--l-slider-thumb-size: | 12px | - |
--l-slider-thumb-color: | white | - |
--l-slider-thumb-radius: | 99px | - |
--l-slider-thumb-border-color: | $gray-1 | - |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。