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