更新记录

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-sharedlime-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 -

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问