drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Progress prop strokeColor support Array type, and support the linear-gradient color

Browse source
This commit is contained in:
梁灏 2019-09-04 15:53:32 +08:00
parent d87a8854b1
commit 25cba38b45
2 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
examples/routers/progress.vue
View file

@ -15,10 +15,20 @@
<Divider></Divider>
<Progress :percent="10" :stroke-width="20" text-inside></Progress>
<Divider></Divider>
<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>

8
src/components/progress/progress.vue
View file

@ -54,7 +54,7 @@
default: false
},
strokeColor: {
type: String
type: [String, Array]
},
textInside: {
type: Boolean,
@ -93,7 +93,11 @@
};
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;