feat(2.x/slider): add dual thumb mode for slider (#7176)

* feat(slider): add dual thumb mode for slider

* fix: test error
This commit is contained in:
被雨水过滤的空气
2020-09-14 06:49:30 +08:00
committed by GitHub
parent 2c38469591
commit 9b32a13bef
6 changed files with 315 additions and 58 deletions
+58 -5
View File
@@ -34,6 +34,32 @@ export default {
};
```
### 双滑块
添加`range`属性就可以开启双滑块模式,确保`value`的值是一个数组
```html
<van-slider v-model="value" range @change="onChange" />
```
```js
import { Toast } from 'vant';
export default {
data() {
return {
// 双滑块模式时,值必须是数组
value: [10, 50],
};
},
methods: {
onChange(value) {
Toast('当前值:' + value);
},
},
};
```
### 指定选择范围
```html
@@ -63,9 +89,7 @@ export default {
```html
<van-slider v-model="value" active-color="#ee0a24">
<template #button>
<div class="custom-button">
{{ value }}
</div>
<div class="custom-button">{{ value }}</div>
</template>
</van-slider>
@@ -87,20 +111,49 @@ export default {
Slider 垂直展示时,高度为 100% 父元素高度
```html
<div :style="{ height: '100px' }">
<div :style="{ height: '120px' }">
<van-slider v-model="value" vertical />
</div>
```
### 垂直方向,双滑块
同时添加`range``vertical`属性,并确保`value`的值是一个数组
```html
<div :style="{ height: '120px' }">
<van-slider v-model="value" range vertical @change="onChange" />
</div>
```
```js
import { Toast } from 'vant';
export default {
data() {
return {
// 双滑块模式时,值必须是数组
value: [10, 50],
};
},
methods: {
onChange(value) {
Toast('当前值:' + value);
},
},
};
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 当前进度百分比 | _number_ | `0` |
| value | 当前进度百分比 | _number \| array_ | `0` |
| max | 最大值 | _number \| string_ | `100` |
| min | 最小值 | _number \| string_ | `0` |
| range | 双滑块模式 | _boolean_ | `false` |
| step | 步长 | _number \| string_ | `1` |
| bar-height | 进度条高度,默认单位为`px` | _number \| string_ | `2px` |
| button-size `v2.4.5` | 滑块按钮大小,默认单位为`px` | _number \| string_ | `24px` |