1.0.2 • Published 2 years ago
le-many-slider v1.0.2
le-many-slider（多滑块组件）
自由滑动（free-slider）
间断点滑动（stop-slider）
安装（install）
npm install le-many-slider自由滑动使用（free-slider-use）
<template>
<LeManySlider v-model="list" :color-list="['red','green']" />
</template>
<script>
import LeManySlider from "le-many-slider"
import "le-many-slider/le-many-slider.css"
export default {
components:{LeManySlider},
data() {
return {
list:[]
}
}
}
</script>间断点滑动使用（stop-slider-use）
<template>
<LeManySlider v-model="list" :color-list="['red','green']" :show-stops="true" :stop-num="stopNum" />
</template>
<script>
import LeManySlider from "le-many-slider"
import "le-many-slider/le-many-slider.css"
export default {
components:{LeManySlider},
data() {
return {
list:[],
stopNum:5
}
}
}
</script>属性（props）
| 参数（param） | 说明（explain） | 类型（type） | 默认值（default） |
|---|---|---|---|
| v-model | 绑定值 | array | item |
| color-list | 滑块颜色列表 | array | 'red','green' |
| show-stops | 是否开启间断点模式 | boolean | false |
| stop-num | 间断点数量 | number | 0 |
item对象内容
| 属性（param） | 说明（explain） | 类型（type） |
|---|---|---|
| id | 唯一标识 | string |
| value | 滑块条宽度百分比 | number |
| diffPrivate | 滑块百分比位置 | number |
| color | 滑块及滑块条的颜色 | string |