Progress prop strokeColor support Array type, and support the linear-…
This commit is contained in:
parent
61a07db243
commit
730eba8adb
2 changed files with 14 additions and 3 deletions
|
@ -12,10 +12,17 @@
|
||||||
<Progress :percent="100"></Progress>
|
<Progress :percent="100"></Progress>
|
||||||
<Progress :percent="25" hide-info></Progress>
|
<Progress :percent="25" hide-info></Progress>
|
||||||
<Progress :percent="10" :stroke-width="20" text-inside></Progress>
|
<Progress :percent="10" :stroke-width="20" text-inside></Progress>
|
||||||
|
<Progress :percent="90" :stroke-color="color1"></Progress>
|
||||||
|
<Progress :percent="90" :stroke-color="color2" status="active"></Progress>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
color1: '#ff6600',
|
||||||
|
color2: ['#108ee9', '#87d068']
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -54,7 +54,7 @@
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
strokeColor: {
|
strokeColor: {
|
||||||
type: String
|
type: [String, Array]
|
||||||
},
|
},
|
||||||
textInside: {
|
textInside: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -93,7 +93,11 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.strokeColor) {
|
if (this.strokeColor) {
|
||||||
style['background-color'] = this.strokeColor;
|
if (typeof this.strokeColor === 'string') {
|
||||||
|
style['background-color'] = this.strokeColor;
|
||||||
|
} else {
|
||||||
|
style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return style;
|
return style;
|
||||||
|
|
Loading…
Add table
Reference in a new issue