mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-06 20:49:46 +08:00
[new feature] Slider: add active-color、inactive-color prop (#2374)
This commit is contained in:
neverland
GitHub
parent
282d8ba27b
commit
9ec78652e1
@ -35,12 +35,16 @@
|
||||
<van-slider
|
||||
v-model="value5"
|
||||
bar-height="4px"
|
||||
active-color="#f44"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customButton')">
|
||||
<van-slider v-model="value6">
|
||||
<van-slider
|
||||
v-model="value6"
|
||||
active-color="#f44"
|
||||
>
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
|
||||
@ -51,13 +51,20 @@ export default {
|
||||
#### Custom style
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" bar-height="4px" />
|
||||
<van-slider
|
||||
v-model="value"
|
||||
bar-height="4px"
|
||||
active-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Custom button
|
||||
|
||||
```html
|
||||
<van-slider v-model="value">
|
||||
<van-slider
|
||||
v-model="value"
|
||||
active-color="#f44"
|
||||
>
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
@ -77,6 +84,8 @@ export default {
|
||||
| min | Min value | `Number` | `0` |
|
||||
| step | Step size | `Number` | `1` |
|
||||
| bar-height | Height of bar | `String` | `2px` |
|
||||
| active-color | Active color of bar | `String` | `#1989fa` |
|
||||
| inactive-color | Inactive color of bar | `String` | `#e5e5e5` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
:class="b({ disabled })"
|
||||
:style="style"
|
||||
@click.stop="onClick"
|
||||
>
|
||||
<div
|
||||
@ -35,6 +36,8 @@ export default create({
|
||||
min: Number,
|
||||
value: Number,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
@ -50,10 +53,17 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
return {
|
||||
background: this.inactiveColor
|
||||
};
|
||||
},
|
||||
|
||||
barStyle() {
|
||||
return {
|
||||
width: this.format(this.value) + '%',
|
||||
height: this.barHeight
|
||||
height: this.barHeight,
|
||||
background: this.activeColor
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider" style="background:undefined;">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
@ -12,8 +12,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider" style="background:undefined;">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
@ -21,8 +21,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider van-slider--disabled">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider van-slider--disabled" style="background:undefined;">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
@ -30,8 +30,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider" style="background:undefined;">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:4px;">
|
||||
<div class="van-slider" style="background:undefined;">
|
||||
<div class="van-slider__bar" style="width:50%;height:4px;background:#f44;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
@ -48,8 +48,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;">
|
||||
<div class="van-slider" style="background:undefined;">
|
||||
<div class="van-slider__bar" style="width:50%;height:2px;background:#f44;">
|
||||
<div class="van-slider__button-wrapper">
|
||||
<div class="custom-button">
|
||||
50
|
||||
|
||||
@ -50,13 +50,20 @@ export default {
|
||||
#### 自定义样式
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" bar-height="4px" />
|
||||
<van-slider
|
||||
v-model="value"
|
||||
bar-height="4px"
|
||||
active-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 自定义按钮
|
||||
|
||||
```html
|
||||
<van-slider v-model="value">
|
||||
<van-slider
|
||||
v-model="value"
|
||||
active-color="#f44"
|
||||
>
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
@ -76,6 +83,8 @@ export default {
|
||||
| min | 最小值 | `Number` | `0` | 1.1.0 |
|
||||
| step | 步长 | `Number` | `1` | 1.1.0 |
|
||||
| bar-height | 进度条高度 | `String` | `2px` | 1.1.0 |
|
||||
| active-color | 进度条激活态颜色 | `String` | `#1989fa` | 1.5.1 |
|
||||
| inactive-color | 进度条默认颜色 | `String` | `#e5e5e5` | 1.5.1 |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user