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