[new feature] Loading: add vertical prop

docs/markdown/v2-progress-tracking.md

@@ -68,6 +68,7 @@
 ### Loading
 
 - 新增`default`插槽
+- 新增`vertical`属性
 - 新增`text-size`属性
 - 支持`Number`类型的`size`属性
 
@@ -80,6 +81,10 @@
 - 新增`left-icon`插槽
 - 新增`right-icon`插槽
 
+### SubmitBar
+
+- 新增`tip-icon`属性
+
 ### Steps
 
 - 新增`inactive-icon`属性
@@ -94,3 +99,4 @@
 
 - 新增`preview-open`事件
 - 新增`preview-close`事件
+ 

packages/loading/demo/index.vue

@@ -18,6 +18,15 @@
         {{ $t('loading') }}
       </van-loading>
     </demo-block>
+
+    <demo-block :title="$t('vertical')">
+      <van-loading
+        size="24px"
+        vertical
+      >
+        {{ $t('loading') }}
+      </van-loading>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -27,12 +36,14 @@ export default {
     'zh-CN': {
       type: '加载类型',
       color: '自定义颜色',
-      text: '加载文案'
+      text: '加载文案',
+      vertical: '垂直排列'
     },
     'en-US': {
       type: 'Type',
       color: 'Color',
-      text: 'Text'
+      text: 'Text',
+      vertical: 'Vertical'
     }
   }
 };
@@ -43,6 +54,10 @@ export default {
   .van-loading {
     display: inline-block;
     margin: 5px 0 5px 20px;
+
+    &--vertical {
+      display: inline-flex;
+    }
   }
 }
 </style>

packages/loading/en-US.md

@@ -29,6 +29,12 @@ Vue.use(Loading);
 <van-loading size="24px">Loading...</van-loading>
 ```
 
+#### Vertical
+
+```html
+<van-loading size="24px" vertical>Loading...</van-loading>
+```
+
 ### Props
 
 | Attribute | Description | Type | Default |
@@ -37,6 +43,7 @@ Vue.use(Loading);
 | type | Can be set to `spinner` | `String` | `circular` |
 | size | Icon size | `String | Number` | `30px` |
 | text-size | Text font size | `String | Number` | `14px` |
+| vertical | Whether to arrange icons and text content vertically | `Boolean` | `false` |
 
 ### Slots
 

packages/loading/index.less

@@ -68,6 +68,17 @@
     line-height: @loading-text-line-height;
     margin-left: 10px;
   }
+
+  &--vertical {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .van-loading__text {
+      margin-left: 0;
+      margin-top: 10px;
+    }
+  }
 }
 
 @keyframes van-circular {

packages/loading/index.tsx

@@ -11,6 +11,7 @@ export type LoadingProps = {
   type: LoadingType;
   size?: string | number;
   color: string;
+  vertical?: boolean;
   textSize?: string | number;
 };
 
@@ -60,7 +61,7 @@ function Loading(
   }
 
   return (
-    <div class={bem([type])} {...inherit(ctx, true)}>
+    <div class={bem([type, { vertical: props.vertical }])} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)} style={style}>
         {Spin}
         {Circular}
@@ -73,6 +74,7 @@ function Loading(
 Loading.props = {
   size: [String, Number],
   textSize: [String, Number],
+  vertical: Boolean,
   type: {
     type: String,
     default: 'circular'

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

@@ -15,5 +15,10 @@ exports[`renders demo correctly 1`] = `
       加载中...
     </span></div>
   </div>
+  <div>
+    <div class="van-loading van-loading--circular van-loading--vertical"><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

@@ -29,6 +29,12 @@ Vue.use(Loading);
 <van-loading size="24px">加载中...</van-loading>
 ```
 
+#### 垂直排列
+
+```html
+<van-loading size="24px" vertical>加载中...</van-loading>
+```
+
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -37,6 +43,7 @@ Vue.use(Loading);
 | type | 类型，可选值为 `spinner` | `String` | `circular` | - |
 | size | 加载图标大小 | `String | Number` | `30px` | - |
 | text-size | 文字大小 | `String | Number` | `14px` | 2.0.0 |
+| vertical | 是否垂直排列图标和文字内容 | `Boolean` | `false` | 2.0.0 |
 
 ### Slots