[new feature] Loading: add default slot

packages/loading/demo/index.vue

@@ -1,17 +1,23 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('loadingType')">
+    <demo-block :title="$t('type')">
       <van-loading />
       <van-loading type="spinner" />
     </demo-block>
 
-    <demo-block :title="$t('loadingColor')">
+    <demo-block :title="$t('color')">
       <van-loading color="#1989fa" />
       <van-loading
         type="spinner"
         color="#1989fa"
       />
     </demo-block>
+
+    <demo-block :title="$t('text')">
+      <van-loading size="24px">
+        {{ $t('loading') }}
+      </van-loading>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -19,12 +25,14 @@
 export default {
   i18n: {
     'zh-CN': {
-      loadingType: '加载类型',
-      loadingColor: '自定义颜色'
+      type: '加载类型',
+      color: '自定义颜色',
+      text: '加载文案'
     },
     'en-US': {
-      loadingType: 'Type',
-      loadingColor: 'Color'
+      type: 'Type',
+      color: 'Color',
+      text: 'Text'
     }
   }
 };

packages/loading/en-US.md

@@ -23,6 +23,12 @@ Vue.use(Loading);
 <van-loading type="spinner" color="#1989fa" />
 ```
 
+#### Text
+
+```html
+<van-loading size="24px">Loading...</van-loading>
+```
+
 ### API
 
 | Attribute | Description | Type | Default |
@@ -30,3 +36,9 @@ Vue.use(Loading);
 | color | Loading color | `String` | `#c9c9c9` |  |
 | type | Can be set to `spinner` | `String` | `circular` |
 | size | Size | `String` | `30px` |
+
+### Slot
+
+| Name | Description |
+|------|------|
+| default | Loading text |

packages/loading/index.less

@@ -1,8 +1,6 @@
 @import '../style/var';
 
 .van-loading {
-  width: 30px;
-  height: 30px;
   z-index: 0;
   font-size: 0;
   line-height: 0;
@@ -11,13 +9,18 @@
 
   &__spinner {
     z-index: -1;
-    width: 100%;
-    height: 100%;
+    width: 30px;
+    height: 30px;
     position: relative;
     display: inline-block;
     box-sizing: border-box;
+    vertical-align: middle;
     animation: van-rotate 0.8s linear infinite;
 
+    // compatible for 1.x, users may set width or height in root element
+    max-width: 100%;
+    max-height: 100%;
+
     &--spinner {
       animation-timing-function: steps(12);
 
@@ -56,6 +59,15 @@
       animation: van-circular 1.5s ease-in-out infinite;
     }
   }
+
+  &__text {
+    display: inline-block;
+    vertical-align: middle;
+    color: @loading-text-color;
+    font-size: @loading-text-font-size;
+    line-height: @loading-text-line-height;
+    margin-left: 10px;
+  }
 }
 
 @keyframes van-circular {

packages/loading/index.tsx

@@ -42,11 +42,12 @@ function Loading(
   );
 
   return (
-    <div class={bem([type])} style={style} {...inherit(ctx, true)}>
-      <span class={bem('spinner', type)}>
+    <div class={bem([type])} {...inherit(ctx, true)}>
+      <span class={bem('spinner', type)} style={style}>
         {Spin}
         {Circular}
       </span>
+      {slots.default && <span class={bem('text')}>{slots.default()}</span>}
     </div>
   );
 }

packages/loading/test/__snapshots__/demo.spec.js.snap

@@ -3,12 +3,17 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    <div class="van-loading van-loading--spinner" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:#c9c9c9;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
   <div>
-    <div class="van-loading van-loading--circular" style="color:#1989fa;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    <div class="van-loading van-loading--spinner" style="color:#1989fa;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:#1989fa;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+  </div>
+  <div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;width:24px;height:24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
+      加载中...
+    </span></div>
   </div>
 </div>
 `;

packages/loading/zh-CN.md

@@ -23,6 +23,12 @@ Vue.use(Loading);
 <van-loading type="spinner" color="#1989fa" />
 ```
 
+#### 加载文案
+
+```html
+<van-loading size="24px">加载中...</van-loading>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -30,3 +36,9 @@ Vue.use(Loading);
 | color | 颜色 | `String` | `#c9c9c9` | - |
 | type | 类型，可选值为 `spinner` | `String` | `circular` | - |
 | size | 大小 | `String` | `30px` | - |
+
+### Slot
+
+| 名称 | 说明 |
+|------|------|
+| default | 加载文案 |