Merge pull request #431 from Tencent/huanyue2019/feature/web/progressFix

fix progress render incorrect when percentage less than 5%
Tencent · Feb 17, 2022 · bb925a3 · bb925a3
2 parents aa1e554 + 8e4d5b4
commit bb925a3
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 61 deletions.
diff --git a/src/progress/progress.tsx b/src/progress/progress.tsx
@@ -127,7 +127,7 @@ export default Vue.extend({
     },
     strokeDashArr(): string {
       const radius = this.diameter / 2;
-      const perimeter = Math.PI * 2 * (radius - this.circleStrokeWidth);
+      const perimeter = Math.PI * 2 * radius;
       const percent = this.percentage / 100;
       return `${perimeter * percent}  ${perimeter * (1 - percent)}`;
     },
@@ -210,18 +210,20 @@ export default Vue.extend({
                 class={`${name}__circle-outer`}
                 style={this.circleStrokeStyle}
               />
-              <circle
-                cx={this.rPoints}
-                cy={this.rPoints}
-                r={this.radius}
-                stroke-width={this.circleStrokeWidth}
-                fill="none"
-                stroke-linecap="round"
-                class={`${name}__circle-inner`}
-                transform={`matrix(0,-1,1,0,0,${this.diameter})`}
-                stroke-dasharray={this.strokeDashArr}
-                style={this.circlePathStyle}
-              />
+              {this.percentage > 0 && (
+                <circle
+                  cx={this.rPoints}
+                  cy={this.rPoints}
+                  r={this.radius}
+                  stroke-width={this.circleStrokeWidth}
+                  fill="none"
+                  stroke-linecap="round"
+                  class={`${name}__circle-inner`}
+                  transform={`matrix(0,-1,1,0,0,${this.diameter})`}
+                  stroke-dasharray={this.strokeDashArr}
+                  style={this.circlePathStyle}
+                />
+              )}
             </svg>
           </div>
         )}