diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index 8c2e5541f..45e452e3e 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -9,9 +9,9 @@ exports[`renders demo correctly 1`] = `
diff --git a/packages/button/test/__snapshots__/index.spec.js.snap b/packages/button/test/__snapshots__/index.spec.js.snap
index 851ece2e0..2eb242725 100644
--- a/packages/button/test/__snapshots__/index.spec.js.snap
+++ b/packages/button/test/__snapshots__/index.spec.js.snap
@@ -2,6 +2,6 @@
exports[`loading size 1`] = `
`;
diff --git a/packages/loading/demo/index.vue b/packages/loading/demo/index.vue
index d9054cbfa..6014fc9dd 100644
--- a/packages/loading/demo/index.vue
+++ b/packages/loading/demo/index.vue
@@ -1,17 +1,23 @@
-
+
-
+
+
+
+
+ {{ $t('loading') }}
+
+
@@ -19,12 +25,14 @@
export default {
i18n: {
'zh-CN': {
- loadingType: '加载类型',
- loadingColor: '自定义颜色'
+ type: '加载类型',
+ color: '自定义颜色',
+ text: '加载文案'
},
'en-US': {
- loadingType: 'Type',
- loadingColor: 'Color'
+ type: 'Type',
+ color: 'Color',
+ text: 'Text'
}
}
};
diff --git a/packages/loading/en-US.md b/packages/loading/en-US.md
index 98bdb77f0..2c20631a9 100644
--- a/packages/loading/en-US.md
+++ b/packages/loading/en-US.md
@@ -23,6 +23,12 @@ Vue.use(Loading);
```
+#### Text
+
+```html
+
Loading...
+```
+
### API
| Attribute | Description | Type | Default |
@@ -30,3 +36,9 @@ Vue.use(Loading);
| color | Loading color | `String` | `#c9c9c9` | |
| type | Can be set to `spinner` | `String` | `circular` |
| size | Size | `String` | `30px` |
+
+### Slot
+
+| Name | Description |
+|------|------|
+| default | Loading text |
\ No newline at end of file
diff --git a/packages/loading/index.less b/packages/loading/index.less
index 1167e520c..560e2d95d 100644
--- a/packages/loading/index.less
+++ b/packages/loading/index.less
@@ -1,8 +1,6 @@
@import '../style/var';
.van-loading {
- width: 30px;
- height: 30px;
z-index: 0;
font-size: 0;
line-height: 0;
@@ -11,13 +9,18 @@
&__spinner {
z-index: -1;
- width: 100%;
- height: 100%;
+ width: 30px;
+ height: 30px;
position: relative;
display: inline-block;
box-sizing: border-box;
+ vertical-align: middle;
animation: van-rotate 0.8s linear infinite;
+ // compatible for 1.x, users may set width or height in root element
+ max-width: 100%;
+ max-height: 100%;
+
&--spinner {
animation-timing-function: steps(12);
@@ -56,6 +59,15 @@
animation: van-circular 1.5s ease-in-out infinite;
}
}
+
+ &__text {
+ display: inline-block;
+ vertical-align: middle;
+ color: @loading-text-color;
+ font-size: @loading-text-font-size;
+ line-height: @loading-text-line-height;
+ margin-left: 10px;
+ }
}
@keyframes van-circular {
diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
index 789424eea..f5ca6ab59 100644
--- a/packages/loading/index.tsx
+++ b/packages/loading/index.tsx
@@ -42,11 +42,12 @@ function Loading(
);
return (
-
-
+
+
{Spin}
{Circular}
+ {slots.default && {slots.default()}}
);
}
diff --git a/packages/loading/test/__snapshots__/demo.spec.js.snap b/packages/loading/test/__snapshots__/demo.spec.js.snap
index 1f75555de..ef9306c86 100644
--- a/packages/loading/test/__snapshots__/demo.spec.js.snap
+++ b/packages/loading/test/__snapshots__/demo.spec.js.snap
@@ -3,12 +3,17 @@
exports[`renders demo correctly 1`] = `
`;
diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md
index 049a4582a..80fa009da 100644
--- a/packages/loading/zh-CN.md
+++ b/packages/loading/zh-CN.md
@@ -23,6 +23,12 @@ Vue.use(Loading);
```
+#### 加载文案
+
+```html
+加载中...
+```
+
### API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -30,3 +36,9 @@ Vue.use(Loading);
| color | 颜色 | `String` | `#c9c9c9` | - |
| type | 类型，可选值为 `spinner` | `String` | `circular` | - |
| size | 大小 | `String` | `30px` | - |
+
+### Slot
+
+| 名称 | 说明 |
+|------|------|
+| default | 加载文案 |
diff --git a/packages/picker/index.js b/packages/picker/index.js
index 731d0a5e1..7b361a12d 100644
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@@ -2,6 +2,7 @@ import { use } from '../utils';
import { prevent } from '../utils/event';
import { deepClone } from '../utils/deep-clone';
import { pickerProps } from './shared';
+import { BLUE } from '../utils/color';
import Loading from '../loading';
import PickerColumn from './PickerColumn';
@@ -170,13 +171,7 @@ export default sfc({
return (
{Toolbar}
- {this.loading ? (
-
-
-
- ) : (
- h()
- )}
+ {this.loading ?
: h()}
{columns.map((item, index) => (
-
+
diff --git a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
index cacbf4661..42f860fa5 100644
--- a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
+++ b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
@@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
@@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
diff --git a/packages/style/var.less b/packages/style/var.less
index f248f1ab8..ad93a4b51 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -180,6 +180,11 @@
@list-text-font-size: 13px;
@list-text-line-height: 50px;
+// Loading
+@loading-text-color: @gray-dark;
+@loading-text-font-size: 14px;
+@loading-text-line-height: 1.2;
+
// NavBar
@nav-bar-height: 46px;
@nav-bar-background-color: @white;
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index 5097129f3..e5b249a13 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index 814814541..5595bd871 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index 283bed3d1..c73aef99b 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `