参数
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| type |
样式类型 |
stirng |
default isLight onDark |
default |
| onDarkBgColor |
type 为 onDark时 背景颜色 |
stirng |
—— |
#1785fb |
| value |
绑定值 |
number |
—— |
0 |
| min |
最小值 |
number |
—— |
0 |
| max |
最大值 |
number |
—— |
100 |
| step |
步长 |
number |
—— |
1 |
| disabled |
是否禁用 |
boolean |
—— |
false |
| outerStops |
自定义间断点标注，eg：[‘自动’, ‘慢速’, ‘快速’] |
array |
—— |
[] |
| outerFormat |
间断点format，优先级低于outerStops |
function |
—— |
—— |
| showStops |
是否显示间断点 |
boolean |
—— |
false |
| showPoints |
是否显示当前值，showStops=false生效 |
boolean |
—— |
false |
| hidePercent |
隐藏边缘比例，showStops=false生效 |
number |
—— |
5 |
| align |
左右刻度的 align 类型 |
string |
—— |
side（可选 center） |
| sidePadding |
左右 padding 距离 |
number |
—— |
—— |
Event
| 事件名称 |
说明 |
回调参数 |
| change |
value发生改变的回调 |
新的value |
Slot
| slot name |
位置 |
| left |
slider 左侧 |
| right |
slider 右侧 |
使用示例
<template>
<div>
<slider v-model="val" @change="onChange" :show-points="false" bar-color="#0082FF">
<div slot="left">开</div>
<div slot="right">关</div>
</slider>
<slider type="" v-model="val2" @change="onChange" :min="0" :max="100" :step="step"></slider>
<slider
type="onDark"
v-model="val3" @change="onChange" :min="40" :max="80" :step="step2" :show-stops="showstops2"
:outer-stops="stops2" align="center"
></slider>
<slider
type="isLight"
v-model="val4" @change="onChange" :min="40" :max="80" :step="step2" :show-stops="showstops2"
:outer-stops="stops3" align="center"
></slider>
</div>
</template>
<script>
import { Slider } from "genie-ui";
export default {
components: {
Slider
},
data() {
return {
step: 1,
showstops: false,
step2: 10,
showstops2: true,
stops2: ['低档', '中档', '高档', '高档', '极档'],
stops3: [45, 50, 55, 60, 65, 70, 75, 80],
val: 40,
val2: 50,
val3: 60,
val4: 70,
};
},
methods: {
onChange(val) {
console.log(val)
}
},
};
</script>
FAQ
关于此文档暂时还没有FAQ
