diff --git a/example/pages/loading/index.wxml b/example/pages/loading/index.wxml index 20b72fa5..537b86b5 100644 --- a/example/pages/loading/index.wxml +++ b/example/pages/loading/index.wxml @@ -7,3 +7,22 @@ + + + + 加载中…… + + + + + + 加载中…… + + + + + + + 加载中…… + + diff --git a/packages/loading/README.md b/packages/loading/README.md index 9de6363e..68b4eff0 100644 --- a/packages/loading/README.md +++ b/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 | 加载文案 | ### 外部样式类 diff --git a/packages/loading/index.less b/packages/loading/index.less index f695cfe6..9fddd9ec 100644 --- a/packages/loading/index.less +++ b/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; diff --git a/packages/loading/index.ts b/packages/loading/index.ts index bd1c1661..bbf0ea2c 100644 --- a/packages/loading/index.ts +++ b/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) + }); } } }); diff --git a/packages/loading/index.wxml b/packages/loading/index.wxml index ff329466..88b0148f 100644 --- a/packages/loading/index.wxml +++ b/packages/loading/index.wxml @@ -1,16 +1,24 @@ - + + class="van-loading__spinner van-loading__spinner--{{ type }}" + style="color: {{ color }};" + > + + + + + \ No newline at end of file