ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 09:24:25 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

[Improvement] Progress: support gradient color (#1098)

Browse Source
This commit is contained in:
neverland
2018-05-18 14:28:33 +08:00
committed by GitHub
parent e9508262b7
commit eee44f0d7c
8 changed files with 87 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/progress/index.vue
View File

@@ -1,7 +1,8 @@
<template>
<div :class="b()">
<span :class="b('portion')" :style="portionStyle" />
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
<span :class="b('portion')" :style="portionStyle">
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
</span>
</div>
</template>
@@ -13,6 +14,7 @@ export default create({
props: {
inactive: Boolean,
pivotColor: String,
percentage: {
type: Number,
required: true,
@@ -42,19 +44,18 @@ export default create({
componentColor() {
return this.inactive ? '#cacaca' : this.color;
},
pivotStyle() {
const { percentage } = this;
return {
color: this.textColor,
backgroundColor: this.componentColor,
left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
background: this.pivotColor || this.componentColor
};
},
portionStyle() {
return {
width: this.percentage + '%',
backgroundColor: this.componentColor
background: this.componentColor
};
}
}