角材料-滑动

简介

滑动是前端开发中常见的交互方式之一，角材料提供了滑动相关的组件和指令，可轻松实现各种类型的滑动效果。

组件

jc-slider

jc-slider 是一个基本的滑动组件，支持水平和垂直方向上的滑动，同时可控制滑块大小、颜色、边框等样式。

示例代码：

<jc-slider direction="horizontal" :length="300" :value="50" @change="handleSliderChange"></jc-slider>

属性

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | value | Number | 0 | 滑块的值，取值范围为 0~100 | | length | Number | 100 | 滑道的长度或宽度，单位为 px | | direction | String | 'horizontal' | 滑动方向，可选值为 'horizontal' 和 'vertical' | | slider-color | String | '#409EFF' | 滑块颜色 | | slider-border-color | String | '#dcdfe6' | 滑块边框颜色 | | slider-size | Number | 20 | 滑块大小，单位为 px | | show-value | Boolean | false | 是否显示当前值 | | disabled | Boolean | false | 是否禁用 |

事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | change | 滑块值发生改变时触发 | 新的滑块值 |

jc-range-slider

jc-range-slider 是一个范围滑动组件，可用于选择一段范围的值。支持水平和垂直方向上的滑动，同时可控制滑块大小、颜色、边框等样式。

示例代码：

<jc-range-slider direction="horizontal" :length="300" :min-value="20" :max-value="80" @change="handleRangeSliderChange"></jc-range-slider>

属性

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | min-value | Number | 0 | 最小值，取值范围为 0~100 | | max-value | Number | 100 | 最大值，取值范围为 0~100 | | length | Number | 100 | 滑道的长度或宽度，单位为 px | | direction | String | 'horizontal' | 滑动方向，可选值为 'horizontal' 和 'vertical' | | slider-color | String | '#409EFF' | 滑块颜色 | | slider-border-color | String | '#dcdfe6' | 滑块边框颜色 | | slider-size | Number | 20 | 滑块大小，单位为 px | | range-bar-color | String | '#e4e7ed' | 范围条颜色 | | show-value | Boolean | false | 是否显示当前范围值 | | disabled | Boolean | false | 是否禁用 |

事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | change | 范围值发生改变时触发 | 新的范围值，类型为对象，包含 min 和 max 两个属性 |

指令

v-slide

v-slide 是一个滑动指令，用于实现元素的滑动效果。支持水平和垂直方向上的滑动，可控制滑动速度、是否循环滑动等参数。

示例代码：

<div v-slide="{direction: 'horizontal', speed: 50, loop: true}">
  <img src="https://vuejs.org/images/logo.png" alt="Vue.js">
  <img src="https://angular.io/assets/images/logos/angular/angular.png" alt="Angular">
  <img src="https://reactjs.org/logo-og.png" alt="React">
</div>

参数

使用对象字面量的方式传递参数。

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | direction | String | 'horizontal' | 滑动方向，可选值为 'horizontal' 和 'vertical' | | speed | Number | 50 | 滑动速度，单位为像素每秒 | | loop | Boolean | false | 是否循环滑动 |

总结

通过角材料提供的滑动组件和指令，我们可以轻松实现各种类型的滑动效果。这些组件和指令都具有良好的扩展性和自定义性，可以满足我们不同的需求。