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="25" hide-info></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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
color1: '#ff6600',
|
||||
color2: ['#108ee9', '#87d068']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
default: false
|
||||
},
|
||||
strokeColor: {
|
||||
type: String
|
||||
type: [String, Array]
|
||||
},
|
||||
textInside: {
|
||||
type: Boolean,
|
||||
|
@ -93,7 +93,11 @@
|
|||
};
|
||||
|
||||
if (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;
|
||||
|
|
Loading…
Add table
Reference in a new issue