diff --git a/src/circle/README.md b/src/circle/README.md index 39b5a102f..3b721baa8 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -121,7 +121,8 @@ export default { | speed | Animate speed(rate/s)| *number* | `0` | - | | text | Text | *string* | - | - | | stroke-width | Stroke width | *number* | `40` | - | -| clockwise | Is clockwise | *boolean* | `true` | - | +| stroke-linecap | Stroke linecap,can be set to `sqaure` `butt` | *string* | `round` | 2.2.15 | +| clockwise | Whether to be clockwise | *boolean* | `true` | - | ### Slots diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index 60be6f55a..351e66d94 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -133,6 +133,7 @@ export default { | speed | 动画速度(单位为 rate/s)| *number* | `0` | - | | text | 文字 | *string* | - | - | | stroke-width | 进度条宽度 | *number* | `40` | - | +| stroke-linecap | 进度条端点的形状,可选值为`sqaure` `butt` | *string* | `round` | 2.2.15 | | clockwise | 是否顺时针增加 | *boolean* | `true` | - | ### Slots diff --git a/src/circle/index.js b/src/circle/index.js index 8c470a112..4a481b871 100644 --- a/src/circle/index.js +++ b/src/circle/index.js @@ -14,12 +14,14 @@ function format(rate) { function getPath(clockwise, viewBoxSize) { const sweepFlag = clockwise ? 1 : 0; - return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`; + return `M ${viewBoxSize / 2} ${viewBoxSize / + 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`; } export default createComponent({ props: { text: String, + strokeLinecap: String, value: { type: Number, default: 0 @@ -85,6 +87,7 @@ export default createComponent({ return { stroke: `${this.color}`, strokeWidth: `${this.strokeWidth + 1}px`, + strokeLinecap: this.strokeLinecap, strokeDasharray: `${offset}px ${PERIMETER}px` }; }, @@ -129,7 +132,9 @@ export default createComponent({ this.startRate = this.value; this.endRate = format(this.rate); this.increase = this.endRate > this.startRate; - this.duration = Math.abs(((this.startRate - this.endRate) * 1000) / this.speed); + this.duration = Math.abs( + ((this.startRate - this.endRate) * 1000) / this.speed + ); if (this.speed) { cancelRaf(this.rafId); @@ -168,7 +173,8 @@ export default createComponent({ stroke={this.gradient ? `url(#${this.uid})` : this.color} /> - {this.slots() || (this.text &&