Progress prop strokeColor support Array type, and support the linear-…

This commit is contained in:
mo.duan 2019-09-06 15:19:01 +08:00
parent 61a07db243
commit 730eba8adb
2 changed files with 14 additions and 3 deletions

View file

@ -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>

View file

@ -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;