blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-06 20:49:46 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Slider: add active-color、inactive-color prop (#2374)

Browse Source
This commit is contained in:
neverland 2018-12-25 21:51:46 +08:00 committed by GitHub
parent 282d8ba27b
commit 9ec78652e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/slider/demo/index.vue
View File

@ -35,12 +35,16 @@
<van-slider <van-slider
v-model="value5" v-model="value5"
bar-height="4px" bar-height="4px"
active-color="#f44"
@change="onChange" @change="onChange"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('customButton')"> <demo-block :title="$t('customButton')">
<van-slider v-model="value6"> <van-slider
v-model="value6"
active-color="#f44"
>
<div <div
slot="button" slot="button"
class="custom-button" class="custom-button"

13
packages/slider/en-US.md
View File

@ -51,13 +51,20 @@ export default {
#### Custom style #### Custom style
```html ```html
<van-slider v-model="value" bar-height="4px" /> <van-slider
v-model="value"
bar-height="4px"
active-color="#f44"
/>
``` ```
#### Custom button #### Custom button
```html ```html
<van-slider v-model="value"> <van-slider
v-model="value"
active-color="#f44"
>
<div <div
slot="button" slot="button"
class="custom-button" class="custom-button"
@ -77,6 +84,8 @@ export default {
| min | Min value | `Number` | `0` | | min | Min value | `Number` | `0` |
| step | Step size | `Number` | `1` | | step | Step size | `Number` | `1` |
| bar-height | Height of bar | `String` | `2px` | | bar-height | Height of bar | `String` | `2px` |
| active-color | Active color of bar | `String` | `#1989fa` |
| inactive-color | Inactive color of bar | `String` | `#e5e5e5` |
### Event ### Event

12
packages/slider/index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div <div
:class="b({ disabled })" :class="b({ disabled })"
:style="style"
@click.stop="onClick" @click.stop="onClick"
> >
<div <div
@ -35,6 +36,8 @@ export default create({
min: Number, min: Number,
value: Number, value: Number,
disabled: Boolean, disabled: Boolean,
activeColor: String,
inactiveColor: String,
max: { max: {
type: Number, type: Number,
default: 100 default: 100
@ -50,10 +53,17 @@ export default create({
}, },
computed: { computed: {
style() {
return {
background: this.inactiveColor
};
},
barStyle() { barStyle() {
return { return {
width: this.format(this.value) + '%', width: this.format(this.value) + '%',
height: this.barHeight height: this.barHeight,
background: this.activeColor
}; };
} }
}, },

24
packages/slider/test/__snapshots__/demo.spec.js.snap
View File

@ -3,8 +3,8 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-slider"> <div class="van-slider" style="background:undefined;">
<div class="van-slider__bar" style="width:50%;height:2px;"> <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
<div class="van-slider__button-wrapper"> <div class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>
@ -12,8 +12,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-slider"> <div class="van-slider" style="background:undefined;">
<div class="van-slider__bar" style="width:50%;height:2px;"> <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
<div class="van-slider__button-wrapper"> <div class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>
@ -21,8 +21,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-slider van-slider--disabled"> <div class="van-slider van-slider--disabled" style="background:undefined;">
<div class="van-slider__bar" style="width:50%;height:2px;"> <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
<div class="van-slider__button-wrapper"> <div class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>
@ -30,8 +30,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-slider"> <div class="van-slider" style="background:undefined;">
<div class="van-slider__bar" style="width:50%;height:2px;"> <div class="van-slider__bar" style="width:50%;height:2px;background:undefined;">
<div class="van-slider__button-wrapper"> <div class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>
@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-slider"> <div class="van-slider" style="background:undefined;">
<div class="van-slider__bar" style="width:50%;height:4px;"> <div class="van-slider__bar" style="width:50%;height:4px;background:#f44;">
<div class="van-slider__button-wrapper"> <div class="van-slider__button-wrapper">
<div class="van-slider__button"></div> <div class="van-slider__button"></div>
</div> </div>
@ -48,8 +48,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-slider"> <div class="van-slider" style="background:undefined;">
<div class="van-slider__bar" style="width:50%;height:2px;"> <div class="van-slider__bar" style="width:50%;height:2px;background:#f44;">
<div class="van-slider__button-wrapper"> <div class="van-slider__button-wrapper">
<div class="custom-button"> <div class="custom-button">
50 50

13
packages/slider/zh-CN.md
View File

@ -50,13 +50,20 @@ export default {
#### 自定义样式 #### 自定义样式
```html ```html
<van-slider v-model="value" bar-height="4px" /> <van-slider
v-model="value"
bar-height="4px"
active-color="#f44"
/>
``` ```
#### 自定义按钮 #### 自定义按钮
```html ```html
<van-slider v-model="value"> <van-slider
v-model="value"
active-color="#f44"
>
<div <div
slot="button" slot="button"
class="custom-button" class="custom-button"
@ -76,6 +83,8 @@ export default {
| min | 最小值 | `Number` | `0` | 1.1.0 | | min | 最小值 | `Number` | `0` | 1.1.0 |
| step | 步长 | `Number` | `1` | 1.1.0 | | step | 步长 | `Number` | `1` | 1.1.0 |
| bar-height | 进度条高度 | `String` | `2px` | 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 ### Event