feat(Loading): use addUnit method (#1969)

packages/loading/README.md

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

packages/loading/index.ts

@@ -1,14 +1,12 @@
 import { VantComponent } from '../common/component';
+import { addUnit } from '../common/utils';
 
-const defaultLoadingSize = '30px';
 VantComponent({
   props: {
     size: {
       type: String,
-      value: defaultLoadingSize,
-      observer: 'normalizeSize'
+      observer: 'setSizeWithUnit'
     },
-
     type: {
       type: String,
       value: 'circular'
@@ -20,20 +18,13 @@ VantComponent({
   },
 
   data: {
-    loadingSize: defaultLoadingSize
+    sizeWithUnit: '30px'
   },
 
   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
+    setSizeWithUnit(size: string | number): void {
+      this.set({
+        sizeWithUnit: addUnit(size)
       });
     }
   }

packages/loading/index.wxml

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