From 2bb01b4a63e27cfc53b537dbda3ff8ec82bc27fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Tue, 30 Apr 2019 17:18:25 +0800 Subject: [PATCH] [new feature] Loading: add default slot --- docs/markdown/v2-progress-tracking.md | 4 ++++ .../test/__snapshots__/index.spec.js.snap | 4 +--- .../test/__snapshots__/demo.spec.js.snap | 4 ++-- .../test/__snapshots__/index.spec.js.snap | 2 +- packages/loading/demo/index.vue | 20 +++++++++++++------ packages/loading/en-US.md | 12 +++++++++++ packages/loading/index.less | 20 +++++++++++++++---- packages/loading/index.tsx | 5 +++-- .../test/__snapshots__/demo.spec.js.snap | 13 ++++++++---- packages/loading/zh-CN.md | 12 +++++++++++ packages/picker/index.js | 9 ++------- packages/picker/index.less | 7 +++---- .../test/__snapshots__/demo.spec.js.snap | 4 +--- .../test/__snapshots__/index.spec.js.snap | 4 ++-- packages/style/var.less | 5 +++++ .../test/__snapshots__/demo.spec.js.snap | 2 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- 18 files changed, 90 insertions(+), 41 deletions(-) diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 2421b4530..5cd18bee3 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -51,6 +51,10 @@ - 新增`Skeleton`骨架屏组件 +## Loading + +- 新增`default`插槽 + ## NoticeBar - 新增`left-icon`插槽 diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap index ba9f8f8a7..9623de848 100644 --- a/packages/address-edit/test/__snapshots__/index.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap @@ -37,9 +37,7 @@ exports[`create a AddressEdit 1`] = `
取消
确认
-
-
-
+
    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 @@ @@ -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`] = `
      合计：¥ 30.50
      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`] = `
      -
      +