)}
+ {/* 环形进度条部分 */}
{this.theme === PRO_THEME.CIRCLE && (
{labelContent}
@@ -220,6 +248,7 @@ export default Vue.extend({
class={`${name}__circle-inner`}
transform={`matrix(0,-1,1,0,0,${this.diameter})`}
stroke-dasharray={this.strokeDashArr}
+ stroke-dashoffset={this.strokeDashOff}
style={this.circlePathStyle}
/>
From 8e4d5b4e844078180c8712ed2beae267c5dab5cb Mon Sep 17 00:00:00 2001
From: Uyarn
Date: Thu, 17 Feb 2022 14:01:14 +0800
Subject: [PATCH 2/2] fix(progress): circle render incorrect when less than 5%
---
src/progress/progress.tsx | 61 ++++++-------------
test/ssr/__snapshots__/ssr.test.js.snap | 44 ++++++-------
.../progress/__snapshots__/demo.test.js.snap | 44 ++++++-------
.../progress/__snapshots__/index.test.js.snap | 5 +-
test/unit/progress/index.test.js | 2 +-
5 files changed, 64 insertions(+), 92 deletions(-)
diff --git a/src/progress/progress.tsx b/src/progress/progress.tsx
index 8fabcd1eb..9faa486cf 100644
--- a/src/progress/progress.tsx
+++ b/src/progress/progress.tsx
@@ -64,7 +64,6 @@ export default Vue.extend({
background: this.color && getBackgroundColor(this.color),
};
},
- // 进度条的颜色
circlePathStyle(): Styles {
const strokeColor = typeof this.color === 'object' ? '' : this.color;
return {
@@ -126,37 +125,12 @@ export default Vue.extend({
const defaultWidth = this.size === CIRCLE_SIZE.SMALL ? 4 : 6;
return this.strokeWidth ? Number(this.strokeWidth) : defaultWidth;
},
-
- /**
- * theme=circle 计算环形的周长
- */
- circleStrokePerimeter(): number {
+ strokeDashArr(): string {
const radius = this.diameter / 2;
- const perimeter = Math.PI * 2 * (radius - this.circleStrokeWidth);
- return perimeter;
- },
-
- /**
- * theme=circle 计算环形进度条的长度
- */
- getPercentLength(): string {
+ const perimeter = Math.PI * 2 * radius;
const percent = this.percentage / 100;
- return `${this.circleStrokePerimeter * percent}`;
- },
- /**
- * theme=circle 环形进度条展示百分比
- */
- strokeDashArr(): string {
- return `${this.getPercentLength} ${this.circleStrokePerimeter - Number(this.getPercentLength)}`;
- },
-
- /**
- * theme=circle 进度条偏移
- */
- strokeDashOff(): string {
- return `${this.getPercentLength}`;
+ return `${perimeter * percent} ${perimeter * (1 - percent)}`;
},
-
plumpStyles(): Styles {
return {};
// return this.percentage > 10 ? { color: '#fff' } : { right: '-2.5rem' };
@@ -207,7 +181,6 @@ export default Vue.extend({
)}
- {/* 进度条内展示百分比 */}
{this.theme === PRO_THEME.PLUMP && (
)}
- {/* 环形进度条部分 */}
{this.theme === PRO_THEME.CIRCLE && (
{labelContent}
@@ -238,19 +210,20 @@ export default Vue.extend({
class={`${name}__circle-outer`}
style={this.circleStrokeStyle}
/>
-
+ {this.percentage > 0 && (
+
+ )}
)}
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 8417100ec..faa494f9b 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -7965,7 +7965,7 @@ exports[`ssr snapshot test renders ./examples/progress/demos/circle.vue correctl
@@ -7976,7 +7976,7 @@ exports[`ssr snapshot test renders ./examples/progress/demos/circle.vue correctl