feat(Loading): 组件 size 支持 Number 格式 (#1952)

packages/loading/README.md

@@ -29,14 +29,14 @@
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 |
+| 参数  | 说明                          | 类型     | 默认值     |
-|-----------|-----------|-----------|-------------|
+| ----- | ----------------------------- | -------- | ---------- |
-| color | 颜色 | *string* | `#c9c9c9` |
+| color | 颜色                          | *string* | `#c9c9c9`  |
-| type | 类型，可选值为 `spinner` | *string* | `circular` |
+| type  | 类型，可选值为 `spinner`      | *string* | `circular` |
-| size | 大小 | *string* | `30px` |
+| size  | 加载图标大小，默认单位为 `px` | *string  | number*    | `30px` |
 
 ### 外部样式类
 
-| 类名 | 说明 |
+| 类名         | 说明         |
-|-----------|-----------|
+| ------------ | ------------ |
 | custom-class | 根节点样式类 |

packages/loading/index.ts

@@ -1,11 +1,14 @@
 import { VantComponent } from '../common/component';
 
+const defaultLoadingSize = '30px';
 VantComponent({
   props: {
     size: {
       type: String,
-      value: '30px'
+      value: defaultLoadingSize,
+      observer: 'normalizeSize'
     },
+
     type: {
       type: String,
       value: 'circular'
@@ -14,5 +17,24 @@ VantComponent({
       type: String,
       value: '#c9c9c9'
     }
+  },
+
+  data: {
+    loadingSize: defaultLoadingSize
+  },
+
+  methods: {
+    // 支持 size="10" 和 size="10px" size="10rpx" 这些格式, 显然也不需要理会 size="abcpx"
+    normalizeSize(size: string | number): void {
+      const numberLike = (s: string) => !Number.isNaN(+s);
+      let loadingSize = size;
+      if (typeof size === 'number' || numberLike(size)) {
+        loadingSize = size + 'px';
+      }
+
+      this.setData({
+        loadingSize
+      });
+    }
   }
 });

packages/loading/index.wxml

@@ -1,6 +1,6 @@
 <view
   class="van-loading custom-class"
-  style="width: {{ size }}; height: {{ size }}"
+  style="width: {{ loadingSize }}; height: {{ loadingSize }}"
 >
   <view
     class="van-loading__spinner van-loading__spinner--{{ type }}"
@@ -13,4 +13,4 @@
       class="van-loading__dot"
     />
   </view>
-</view>
+</view>