[new feature] progress add showPivot prop (#300)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop
This commit is contained in:
neverland 2017-11-10 05:59:15 -06:00 committed by GitHub
parent fbcb691699
commit 5048d4fbac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 9 deletions

View File

@ -49,6 +49,7 @@ Use `pivot-text` to custom textuse `color` to custom bar color
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| inactive | Whether to be gray | `Boolean` | `false` | - | | inactive | Whether to be gray | `Boolean` | `false` | - |
| percentage | Percentage | `Number` | `false` | `0-100` | | percentage | Percentage | `Number` | `false` | `0-100` |
| showPivot | Whether to show text | `Boolean` | `true` | - |
| pivotText | Text | `String` | percentage | - | | pivotText | Text | `String` | percentage | - |
| color | Color | `String` | `#38f` | hexvalue | | color | Color | `String` | `#38f` | hexvalue |
| textColor | Text color | `String` | `#fff` | hexvalue | | textColor | Text color | `String` | `#fff` | hexvalue |

View File

@ -59,6 +59,7 @@ Vue.component(Progress.name, Progress);
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | - | | inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | `0-100` | | percentage | 进度百分比 | `Number` | `false` | `0-100` |
| showPivot | 是否显示进度文字 | `Boolean` | `true` | - |
| pivotText | 文字显示 | `String` | 百分比文字 | - | | pivotText | 文字显示 | `String` | 百分比文字 | - |
| color | 进度条颜色 | `String` | `#38f` | hexvalue | | color | 进度条颜色 | `String` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue | | textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |

View File

@ -1,25 +1,25 @@
<template> <template>
<div class="van-progress"> <div class="van-progress">
<span class="van-progress__portion" :style="portionStyle"></span> <span class="van-progress__portion" :style="portionStyle"></span>
<span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span> <span class="van-progress__pivot" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
</div> </div>
</template> </template>
<script> <script>
const DEFAULT_COLOR = '#38f';
const DEFAULT_TEXT_COLOR = '#fff';
const INACTIVE_COLOR = '#cacaca';
export default { export default {
name: 'van-progress', name: 'van-progress',
props: { props: {
inactive: Boolean,
percentage: { percentage: {
type: Number, type: Number,
required: true, required: true,
validator: value => value >= 0 && value <= 100 validator: value => value >= 0 && value <= 100
}, },
inactive: Boolean, showPivot: {
type: Boolean,
default: true
},
pivotText: { pivotText: {
type: String, type: String,
default() { default() {
@ -28,17 +28,17 @@ export default {
}, },
color: { color: {
type: String, type: String,
default: DEFAULT_COLOR default: '#38f'
}, },
textColor: { textColor: {
type: String, type: String,
default: DEFAULT_TEXT_COLOR default: '#fff'
} }
}, },
computed: { computed: {
componentColor() { componentColor() {
return this.inactive ? INACTIVE_COLOR : this.color; return this.inactive ? '#cacaca' : this.color;
}, },
pivotStyle() { pivotStyle() {
const { percentage } = this; const { percentage } = this;

View File

@ -27,8 +27,14 @@
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
.van-icon {
display: block;
}
&-dot { &-dot {
&::after { &::after {
top: 0;
right: -8px;
width: 8px; width: 8px;
height: 8px; height: 8px;
content: ' '; content: ' ';