[improvement] Circle: support number type of size prop (#4160)

src/circle/README.md

@@ -114,7 +114,7 @@ export default {
 |------|------|------|------|
 | v-model | Current rate | `number` | - |
 | rate | Target rate | `number` | `100` |
-| size | Circle size | `string` | `100px` |
+| size | Circle size | `string | number` | `100px` |
 | color | Progress color, passing object to render gradient | `string | object` | `#1989fa` |
 | layer-color | Layer color | `string` | `#fff` |
 | fill | Fill color | `string` | `none` |

src/circle/README.zh-CN.md

@@ -126,7 +126,7 @@ export default {
 |------|------|------|------|------|
 | v-model | 当前进度 | `number` | - | - |
 | rate | 目标进度 | `number` | `100` | - |
-| size | 圆环直径 | `string` | `100px` | - |
+| size | 圆环直径，默认单位为 `px` | `string | number` | `100px` | - |
 | color | 进度条颜色，传入对象格式可以定义渐变色 | `string | object` | `#1989fa` | 2.1.4 |
 | layer-color | 轨道颜色 | `string` | `#fff` | - |
 | fill | 填充颜色 | `string` | `none` | - |

src/circle/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, isObj } from '../utils';
+import { createNamespace, isObj, addUnit } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
 import { BLUE, WHITE } from '../utils/constant';
 
@@ -29,8 +29,8 @@ export default createComponent({
       default: 0
     },
     size: {
-      type: String,
-      default: '100px'
+      type: [String, Number],
+      default: 100
     },
     fill: {
       type: String,
@@ -64,9 +64,10 @@ export default createComponent({
 
   computed: {
     style() {
+      const size = addUnit(this.size);
       return {
-        width: this.size,
-        height: this.size
+        width: size,
+        height: size
       };
     },
 

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

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`size prop 1`] = `
+<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
+    <path d="M 530 530 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 530 530 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: 0px 3140px;"></path>
+  </svg></div>
+`;
+
 exports[`speed is 0 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
     <path d="M 530 530 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>

src/circle/test/index.spec.js

@@ -37,3 +37,13 @@ test('animate', async () => {
   expect(onInput).toHaveBeenCalled();
   expect(onInput.mock.calls[0][0]).not.toEqual(0);
 });
+
+test('size prop', () => {
+  const wrapper = mount(Circle, {
+    propsData: {
+      size: 100
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});