diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 4c92413c4..40e0af2b1 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/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`事件
+
\ No newline at end of file
diff --git a/packages/loading/demo/index.vue b/packages/loading/demo/index.vue
index 6014fc9dd..66104ae56 100644
--- a/packages/loading/demo/index.vue
+++ b/packages/loading/demo/index.vue
@@ -18,6 +18,15 @@
{{ $t('loading') }}
+
+
+
+ {{ $t('loading') }}
+
+
@@ -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;
+ }
}
}
diff --git a/packages/loading/en-US.md b/packages/loading/en-US.md
index ce31148ce..217d09259 100644
--- a/packages/loading/en-US.md
+++ b/packages/loading/en-US.md
@@ -29,6 +29,12 @@ Vue.use(Loading);
Loading...
```
+#### Vertical
+
+```html
+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
diff --git a/packages/loading/index.less b/packages/loading/index.less
index 560e2d95d..74cebeae7 100644
--- a/packages/loading/index.less
+++ b/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 {
diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
index 155ef19cf..cb3824e53 100644
--- a/packages/loading/index.tsx
+++ b/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 (
-
+
{Spin}
{Circular}
@@ -73,6 +74,7 @@ function Loading(
Loading.props = {
size: [String, Number],
textSize: [String, Number],
+ vertical: Boolean,
type: {
type: String,
default: 'circular'
diff --git a/packages/loading/test/__snapshots__/demo.spec.js.snap b/packages/loading/test/__snapshots__/demo.spec.js.snap
index ef9306c86..6431e0b4c 100644
--- a/packages/loading/test/__snapshots__/demo.spec.js.snap
+++ b/packages/loading/test/__snapshots__/demo.spec.js.snap
@@ -15,5 +15,10 @@ exports[`renders demo correctly 1`] = `
加载中...
+
`;
diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md
index 8a1709728..b2e3a5775 100644
--- a/packages/loading/zh-CN.md
+++ b/packages/loading/zh-CN.md
@@ -29,6 +29,12 @@ Vue.use(Loading);
加载中...
```
+#### 垂直排列
+
+```html
+加载中...
+```
+
### 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