blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Loading: add default slot

Browse Source
This commit is contained in:
陈嘉涵 2019-04-30 17:18:25 +08:00
parent dd32efd5a4
commit 2bb01b4a63
18 changed files with 90 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/markdown/v2-progress-tracking.md
View File

@ -51,6 +51,10 @@
- 新增`Skeleton`骨架屏组件 - 新增`Skeleton`骨架屏组件
## Loading
- 新增`default`插槽
## NoticeBar ## NoticeBar
- 新增`left-icon`插槽 - 新增`left-icon`插槽

4
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -37,9 +37,7 @@ exports[`create a AddressEdit 1`] = `
<div class="van-picker__cancel">取消</div> <div class="van-picker__cancel">取消</div>
<div class="van-picker__confirm">确认</div> <div class="van-picker__confirm">确认</div>
</div> </div>
<div class="van-picker__loading"> <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
<div class="van-picker__columns" style="height:220px;"> <div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;"> <div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul> <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>

4
packages/button/test/__snapshots__/demo.spec.js.snap
View File

@ -9,9 +9,9 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div> <div><button class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div> <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--loading"> <div><button class="van-button van-button--primary van-button--normal van-button--loading">
<div class="van-loading van-loading--circular" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button> <button class="van-button van-button--danger van-button--normal van-button--loading"> </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
<div class="van-loading van-loading--circular" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__loading-text">加载中...</span> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__loading-text">加载中...</span>
</button></div> </button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div> <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
<div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div> <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>

2
packages/button/test/__snapshots__/index.spec.js.snap
View File

@ -2,6 +2,6 @@
exports[`loading size 1`] = ` exports[`loading size 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading"> <button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button> </button>
`; `;

20
packages/loading/demo/index.vue
View File

@ -1,17 +1,23 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('loadingType')"> <demo-block :title="$t('type')">
<van-loading /> <van-loading />
<van-loading type="spinner" /> <van-loading type="spinner" />
</demo-block> </demo-block>
<demo-block :title="$t('loadingColor')"> <demo-block :title="$t('color')">
<van-loading color="#1989fa" /> <van-loading color="#1989fa" />
<van-loading <van-loading
type="spinner" type="spinner"
color="#1989fa" color="#1989fa"
/> />
</demo-block> </demo-block>
<demo-block :title="$t('text')">
<van-loading size="24px">
{{ $t('loading') }}
</van-loading>
</demo-block>
</demo-section> </demo-section>
</template> </template>
@ -19,12 +25,14 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
loadingType: '加载类型', type: '加载类型',
loadingColor: '自定义颜色' color: '自定义颜色',
text: '加载文案'
}, },
'en-US': { 'en-US': {
loadingType: 'Type', type: 'Type',
loadingColor: 'Color' color: 'Color',
text: 'Text'
} }
} }
}; };

12
packages/loading/en-US.md
View File

@ -23,6 +23,12 @@ Vue.use(Loading);
<van-loading type="spinner" color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
``` ```
#### Text
```html
<van-loading size="24px">Loading...</van-loading>
```
### API ### API
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
@ -30,3 +36,9 @@ Vue.use(Loading);
| color | Loading color | `String` | `#c9c9c9` | | | color | Loading color | `String` | `#c9c9c9` | |
| type | Can be set to `spinner` | `String` | `circular` | | type | Can be set to `spinner` | `String` | `circular` |
| size | Size | `String` | `30px` | | size | Size | `String` | `30px` |
### Slot
| Name | Description |
|------|------|
| default | Loading text |

20
packages/loading/index.less
View File

@ -1,8 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-loading { .van-loading {
width: 30px;
height: 30px;
z-index: 0; z-index: 0;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
@ -11,13 +9,18 @@
&__spinner { &__spinner {
z-index: -1; z-index: -1;
width: 100%; width: 30px;
height: 100%; height: 30px;
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle;
animation: van-rotate 0.8s linear infinite; 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 { &--spinner {
animation-timing-function: steps(12); animation-timing-function: steps(12);
@ -56,6 +59,15 @@
animation: van-circular 1.5s ease-in-out infinite; 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 { @keyframes van-circular {

5
packages/loading/index.tsx
View File

@ -42,11 +42,12 @@ function Loading(
); );
return ( return (
<div class={bem([type])} style={style} {...inherit(ctx, true)}> <div class={bem([type])} {...inherit(ctx, true)}>
<span class={bem('spinner', type)}> <span class={bem('spinner', type)} style={style}>
{Spin} {Spin}
{Circular} {Circular}
</span> </span>
{slots.default && <span class={bem('text')}>{slots.default()}</span>}
</div> </div>
); );
} }

13
packages/loading/test/__snapshots__/demo.spec.js.snap
View File

@ -3,12 +3,17 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--spinner" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div> <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:#c9c9c9;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div> </div>
<div> <div>
<div class="van-loading van-loading--circular" style="color:#1989fa;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--spinner" style="color:#1989fa;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div> <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:#1989fa;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
<div>
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;width:24px;height:24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
加载中...
</span></div>
</div> </div>
</div> </div>
`; `;

12
packages/loading/zh-CN.md
View File

@ -23,6 +23,12 @@ Vue.use(Loading);
<van-loading type="spinner" color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
``` ```
#### 加载文案
```html
<van-loading size="24px">加载中...</van-loading>
```
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -30,3 +36,9 @@ Vue.use(Loading);
| color | 颜色 | `String` | `#c9c9c9` | - | | color | 颜色 | `String` | `#c9c9c9` | - |
| type | 类型，可选值为 `spinner` | `String` | `circular` | - | | type | 类型，可选值为 `spinner` | `String` | `circular` | - |
| size | 大小 | `String` | `30px` | - | | size | 大小 | `String` | `30px` | - |
### Slot
| 名称 | 说明 |
|------|------|
| default | 加载文案 |

9
packages/picker/index.js
View File

@ -2,6 +2,7 @@ import { use } from '../utils';
import { prevent } from '../utils/event'; import { prevent } from '../utils/event';
import { deepClone } from '../utils/deep-clone'; import { deepClone } from '../utils/deep-clone';
import { pickerProps } from './shared'; import { pickerProps } from './shared';
import { BLUE } from '../utils/color';
import Loading from '../loading'; import Loading from '../loading';
import PickerColumn from './PickerColumn'; import PickerColumn from './PickerColumn';
@ -170,13 +171,7 @@ export default sfc({
return ( return (
<div class={bem()}> <div class={bem()}>
{Toolbar} {Toolbar}
{this.loading ? ( {this.loading ? <Loading class={bem('loading')} color={BLUE} /> : h()}
<div class={bem('loading')}>
<Loading />
</div>
) : (
h()
)}
<div class={bem('columns')} style={columnsStyle} onTouchmove={prevent}> <div class={bem('columns')} style={columnsStyle} onTouchmove={prevent}>
{columns.map((item, index) => ( {columns.map((item, index) => (
<PickerColumn <PickerColumn

7
packages/picker/index.less
View File

@ -43,12 +43,11 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
display: flex;
position: absolute; position: absolute;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, .9); background-color: rgba(255, 255, 255, .9);
circle {
stroke: @blue;
}
} }
&__loading .van-loading, &__loading .van-loading,

4
packages/picker/test/__snapshots__/demo.spec.js.snap
View File

@ -98,9 +98,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-picker"> <div class="van-picker">
<div class="van-picker__loading"> <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
<div class="van-picker__columns" style="height:220px;"> <div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column column1" style="height:220px;"> <div class="van-picker-column column1" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"> <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">

4
packages/pull-refresh/test/__snapshots__/index.spec.js.snap
View File

@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);"> <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
</div> </div>
</div> </div>
</div> </div>
@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);"> <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
</div> </div>
</div> </div>
</div> </div>

5
packages/style/var.less
View File

@ -180,6 +180,11 @@
@list-text-font-size: 13px; @list-text-font-size: 13px;
@list-text-line-height: 50px; @list-text-line-height: 50px;
// Loading
@loading-text-color: @gray-dark;
@loading-text-font-size: 14px;
@loading-text-line-height: 1.2;
// NavBar // NavBar
@nav-bar-height: 46px; @nav-bar-height: 46px;
@nav-bar-background-color: @white; @nav-bar-background-color: @white;

2
packages/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-submit-bar"> <div class="van-submit-bar">
<div class="van-submit-bar__bar"> <div class="van-submit-bar__bar">
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--loading van-button--square"> <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--loading van-button--square">
<div class="van-loading van-loading--circular" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button> </button>
</div> </div>
</div> </div>

2
packages/switch-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-switch van-switch--on" style="font-size:24px;"> <div class="van-switch van-switch--on" style="font-size:24px;">
<div class="van-switch__node"> <div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div> </div>
</div> </div>
</div> </div>

2
packages/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-switch van-switch--on" style="font-size:30px;"> <div class="van-switch van-switch--on" style="font-size:30px;">
<div class="van-switch__node"> <div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#c9c9c9;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div> </div>
</div> </div>
</div> </div>