vue 环形进度条封装

<template> <div> <svg :viewBox="`0 0 ${2 * radius + srtokeWidth} ${radius + srtokeWidth}`"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" :stop-color="defaultNegativeColor" /> <stop offset="100%" :stop-color="defaultPositiveColor" /> </linearGradient> </defs> <path :d=" `M ${srtokeWidth / 2} ${radius + srtokeWidth / 2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0` " :stroke-width="srtokeWidth" :stroke="emptyColor" fill="none" stroke-linecap="round" ></path> <path :d=" `M ${srtokeWidth / 2} ${radius + srtokeWidth / 2} a ${radius} ${radius} 0 1 1 ${radius * 2} 0` " :stroke-width="srtokeWidth" stroke="url(#linear)" fill="none" stroke-linecap="round" :stroke-dasharray="strokeDasharray" :stroke-dashoffset="strokeDashoffset" > <animate attributeName="stroke-dashoffset" :dur="`${durTime}ms`" fill="freeze" :from="strokeDasharray" :to="strokeDashoffset" ></animate> </path> </svg> </div> </template> <script> export default { data() { return { defaultDurTime: 800, // 进度条完结时间 defaultEmptyColor: '#ECF2FF', // 默认底色 defaultNegativeColor: '#d4fc78', // 80EDFF FF4456 defaultPositiveColor: '#00ba5e', // 进行时底色 defaultSrtokeWidth: 10, // 进度线宽度 defaultRadius: 100 } }, props: ['options', 'value'], computed: { durTime() { return this.options ? this.options.durTime || this.defaultDurTime : this.defaultDurTime }, radius() { return this.options ? this.options.radius || this.defaultRadius : this.defaultRadius }, emptyColor() { return this.options ? this.options.emptyColor || this.defaultEmptyColor : this.defaultEmptyColor }, srtokeWidth() { return this.options ? this.options.srtokeWidth || this.defaultSrtokeWidth : this.defaultSrtokeWidth }, valueColor() { if (this.value < 0) { return this.options ? this.options.negativeColor || this.defaultNegativeColor : this.defaultNegativeColor } else { return this.options ? this.options.positiveColor || this.defaultPositiveColor : this.defaultPositiveColor } }, strokeDasharray() { return 3.1415926 * this.radius }, strokeDashoffset() { return this.strokeDasharray - this.strokeDasharray * this.value // return 10 } } } </script>