mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 06:59:15 +08:00
[new feature] progress add showPivot prop (#300)
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop
This commit is contained in:
parent
fbcb691699
commit
5048d4fbac
@ -49,6 +49,7 @@ Use `pivot-text` to custom text,use `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 |
|
||||||
|
@ -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 |
|
||||||
|
@ -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;
|
||||||
|
@ -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: ' ';
|
||||||
|
Loading…
x
Reference in New Issue
Block a user