更新记录

0.0.4（2024-11-18） 下载此版本

• fix: 修复更新频繁问题

0.0.3（2024-10-21） 下载此版本

• chore: 更新文档

0.0.2（2024-10-21） 下载此版本

• chore: 兼容vue2

平台兼容性

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

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

打赏

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