Loading 支持 slot 传递加载文案 (#1977)

example/pages/loading/index.wxml

@@ -7,3 +7,22 @@
   <van-loading custom-class="loading" type="spinner" />
   <van-loading custom-class="loading shadow" type="spinner" color="#fff" />
 </demo-block>
+
+<demo-block title="加载文案" padding>
+  <van-loading custom-class="loading">
+    加载中……
+  </van-loading>
+</demo-block>
+
+<demo-block title="加载文案大小调整" padding>
+  <van-loading custom-class="loading" text-size="12" vertical>
+    加载中……
+  </van-loading>
+</demo-block>
+
+
+<demo-block title="加载文案竖直排列" padding>
+  <van-loading custom-class="loading" vertical>
+    加载中……
+  </van-loading>
+</demo-block>

packages/loading/README.md

@@ -35,6 +35,15 @@
 | color | 颜色 | *string* | `#c9c9c9` | - |
 | type | 类型，可选值为 `spinner` | *string* | `circular` | - |
 | size | 加载图标大小，默认单位为 `px` | *string \| number* | `30px` | - |
+| text-size | 文字大小，默认单位为为 `px` | *string \| number* | `14px` | 1.0 |
+| vertical | 是否垂直排列图标和文字内容 | *boolean* | `false` | 1.0 |
+
+
+### Slots 
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 加载文案 |
 
 ### 外部样式类
 

packages/loading/index.less

@@ -1,11 +1,20 @@
 @import '../common/style/var.less';
 
 .van-loading {
-  position: relative;
-  z-index: 0;
-  display: inline-block;
-  line-height: 0;
-  vertical-align: middle;
+  &__wrapper {
+    position: relative;
+    z-index: 0;
+    display: inline-block;
+    line-height: 0;
+  }
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &--vertical {
+    flex-direction: column;
+  }
 
   &__spinner {
     position: relative;
@@ -28,6 +37,15 @@
     }
   }
 
+  &__text {
+    margin-left: 8px;
+    color: #969799;
+
+    &--vertical {
+      margin: 8px 0 0;
+    }
+  }
+
   &__dot {
     position: absolute;
     top: 0;

packages/loading/index.ts

@@ -14,11 +14,17 @@ VantComponent({
     color: {
       type: String,
       value: '#c9c9c9'
-    }
+    },
+    textSize: {
+      type: String,
+      observer: 'setTextSizeWithUnit'
+    },
+    vertical: Boolean
   },
 
   data: {
-    sizeWithUnit: '30px'
+    sizeWithUnit: '30px',
+    textSizeWithUnit: '14px'
   },
 
   methods: {
@@ -26,6 +32,12 @@ VantComponent({
       this.setData({
         sizeWithUnit: addUnit(size)
       });
+    },
+
+    setTextSizeWithUnit(size: string | number): void {
+      this.set({
+        textSizeWithUnit: addUnit(size)
+      });
     }
   }
 });

packages/loading/index.wxml

@@ -1,16 +1,24 @@
-<view
-  class="van-loading custom-class"
-  style="width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
->
+<view class="van-loading {{vertical ? 'van-loading--vertical' : ''}}">
   <view
-    class="van-loading__spinner van-loading__spinner--{{ type }}"
-    style="color: {{ color }};"
+    class="van-loading__wrapper custom-class"
+    style="width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
   >
     <view
-      wx:if="{{ type === 'spinner' }}"
-      wx:for="item in 12"
-      wx:key="index"
-      class="van-loading__dot"
-    />
+      class="van-loading__spinner van-loading__spinner--{{ type }}"
+      style="color: {{ color }};"
+    >
+      <view
+        wx:if="{{ type === 'spinner' }}"
+        wx:for="item in 12"
+        wx:key="index"
+        class="van-loading__dot"
+      />
+    </view>
+  </view>
+  <view 
+    style="font-size: {{textSizeWithUnit}};" 
+    class="van-loading__text {{vertical ? 'van-loading__text--vertical' : ''}}"
+  >
+    <slot />
   </view>
 </view>