feat(Circle): add stroke-linecap prop (#5087)

* feat(Circle): add stroke-linecap prop

* docs: butt

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
 

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

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}
           />
         </svg>
-        {this.slots() || (this.text && <div class={bem('text')}>{this.text}</div>)}
+        {this.slots() ||
+          (this.text && <div class={bem('text')}>{this.text}</div>)}
       </div>
     );
   }

src/circle/test/__snapshots__/index.spec.js.snap

@@ -13,3 +13,10 @@ exports[`speed is 0 1`] = `
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
   </svg></div>
 `;
+
+exports[`stroke-linecap prop 1`] = `
+<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
+  </svg></div>
+`;

src/circle/test/index.spec.js

@@ -47,3 +47,13 @@ test('size prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('stroke-linecap prop', () => {
+  const wrapper = mount(Circle, {
+    propsData: {
+      strokeLinecap: 'square'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});