blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-11 11:12:10 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Loading: support any color (#1717)

Browse Source
This commit is contained in:
neverland 2018-08-30 15:24:59 +08:00 committed by GitHub
parent fe86cea891
commit 56cc2ce837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 40 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,7 +87,7 @@ exports[`create a AddressEdit 1`] = `
<div class="van-picker__confirm">确认</div> <div class="van-picker__confirm">确认</div>
</div> </div>
<div class="van-picker__loading"> <div class="van-picker__loading">
<div class="van-loading van-loading--circular van-loading--black"><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-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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>
<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;">

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

@ -42,10 +42,10 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable"> <button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--black" style="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__text"></span></button> <div class="van-loading van-loading--circular van-loading--black" style="color:#c9c9c9;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__text"></span></button>
<button <button
class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable"> class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--white" style="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__text"></span></button> <div class="van-loading van-loading--circular van-loading--white" style="color:white;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__text"></span></button>
</div> </div>
<div> <div>
<a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal"> <a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal">

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

@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-list"> <div class="van-list">
<div class="van-list__loading" style="display:none;"> <div class="van-list__loading" style="display:none;">
<div class="van-loading van-loading--circular van-loading--black"><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-list__loading-text">加载中...</span></div> <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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-list__loading-text">加载中...</span></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,12 +1,12 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="$t('title1')">
<van-loading color="black" /> <van-loading />
<van-loading color="white" /> <van-loading color="white" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-loading type="spinner" color="black" /> <van-loading type="spinner" />
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="white" />
</demo-block> </demo-block>
</demo-section> </demo-section>

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

@ -12,14 +12,14 @@ Vue.use(Loading);
#### Circular #### Circular
```html ```html
<van-loading color="black" /> <van-loading />
<van-loading color="white" /> <van-loading color="white" />
``` ```
#### Spinner #### Spinner
```html ```html
<van-loading type="spinner" color="black" /> <van-loading type="spinner" />
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="white" />
``` ```
@ -27,6 +27,6 @@ Vue.use(Loading);
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| color | Can be set to `white` | `String` | `black` | | | 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` |

16
packages/loading/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="b([type, color])" :style="style"> <div :class="b([type, colorType])" :style="style">
<span :class="b('spinner', type)"> <span :class="b('spinner', type)">
<i v-for="(item, index) in (type === 'spinner' ? 12 : 0)" :key="index" /> <i v-for="(item, index) in (type === 'spinner' ? 12 : 0)" :key="index" />
<svg v-if="type === 'circular'" :class="b('circular')" viewBox="25 25 50 50"> <svg v-if="type === 'circular'" :class="b('circular')" viewBox="25 25 50 50">
@ -12,6 +12,8 @@
<script> <script>
import create from '../utils/create-basic'; import create from '../utils/create-basic';
const DEFAULT_COLOR = '#c9c9c9';
export default create({ export default create({
name: 'loading', name: 'loading',
@ -23,16 +25,22 @@ export default create({
}, },
color: { color: {
type: String, type: String,
default: 'black' default: DEFAULT_COLOR
} }
}, },
computed: { computed: {
colorType() {
const { color } = this;
return color === 'white' || color === 'black' ? color : '';
},
style() { style() {
return this.size ? { return {
color: this.color === 'black' ? DEFAULT_COLOR : this.color,
width: this.size, width: this.size,
height: this.size height: this.size
} : {}; };
} }
} }
}); });

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

@ -3,12 +3,13 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-loading van-loading--circular van-loading--black"><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-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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-loading--white"><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-loading--white"
style="color:white;width:undefined;height:undefined;"><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>
<div> <div>
<div class="van-loading van-loading--spinner van-loading--black"><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 van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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 van-loading--white"><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 van-loading--white" style="color:white;width:undefined;height:undefined;"><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> </div>
</div> </div>
`; `;

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

@ -12,14 +12,14 @@ Vue.use(Loading);
#### Circular #### Circular
```html ```html
<van-loading color="black" /> <van-loading />
<van-loading color="white" /> <van-loading color="white" />
``` ```
#### Spinner #### Spinner
```html ```html
<van-loading type="spinner" color="black" /> <van-loading type="spinner" />
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="white" />
``` ```
@ -27,6 +27,6 @@ Vue.use(Loading);
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| color | 颜色，可选值为 `white` | `String` | `black` | | color | 颜色 | `String` | `#c9c9c9` |
| type | 类型，可选值为 `spinner` | `String` | `circular` | | type | 类型，可选值为 `spinner` | `String` | `circular` |
| size | 大小 | `String` | `30px` | | size | 大小 | `String` | `30px` |

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

@ -86,7 +86,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker"> <div class="van-picker">
<!----> <!---->
<div class="van-picker__loading"> <div class="van-picker__loading">
<div class="van-loading van-loading--circular van-loading--black"><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-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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>
<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;">

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

@ -32,7 +32,7 @@ exports[`change head content when pulling down 3`] = `
<!----> <!---->
<!----> <!---->
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading--black"><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> <div class="van-loading van-loading--circular van-loading" 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>
</div> </div>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@ exports[`change head content when pulling down 4`] = `
<!----> <!---->
<!----> <!---->
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading--black"><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> <div class="van-loading van-loading--circular van-loading" 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>
</div> </div>
</div> </div>
</div> </div>

2
packages/sku/components/SkuImgUploader.vue
View File

@ -30,7 +30,7 @@
<!-- 正在上传的图片,有上传等待提示 --> <!-- 正在上传的图片,有上传等待提示 -->
<div v-if="paddingImg" :class="b('img')"> <div v-if="paddingImg" :class="b('img')">
<img :src="paddingImg"> <img :src="paddingImg">
<loading :class="b('uploading')" type="spinner" color="black" /> <loading :class="b('uploading')" type="spinner" />
</div> </div>
</div> </div>
</div> </div>

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

@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
<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> <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--normal van-button--loading van-button--unclickable"> <button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
<div class="van-loading van-loading--circular van-loading--white" style="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__text"> <div class="van-loading van-loading--circular van-loading--white" style="color:white;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__text">
</span></button> </span></button>
</div> </div>

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

@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> <div class="van-cell__value">
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;"> <div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
<div class="van-switch__node"> <div class="van-switch__node">
<div class="van-loading van-loading--circular van-loading--black van-switch__loading"><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-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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>
</div> </div>
</div> </div>

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

@ -19,7 +19,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-loading--black van-switch__loading"><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-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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>
</div> </div>
</div> </div>

31
packages/vant-css/src/loading.css
View File

@ -26,10 +26,13 @@
&--circle { &--circle {
border-radius: 100%; border-radius: 100%;
border: 3px solid transparent; border: 3px solid transparent;
border-color: $gray;
border-top-color: $gray-darker;
} }
&--gradient-circle { &--gradient-circle {
background-size: contain; background-size: contain;
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
} }
&--spinner { &--spinner {
@ -64,31 +67,13 @@
height: 100%; height: 100%;
circle { circle {
stroke: currentColor;
stroke-width: 3; stroke-width: 3;
stroke-linecap: round; stroke-linecap: round;
animation: van-circular 1.5s ease-in-out infinite; animation: van-circular 1.5s ease-in-out infinite;
} }
} }
&--black {
.van-loading__spinner--circle {
border-color: $gray;
border-top-color: $gray-darker;
}
.van-loading__spinner--gradient-circle {
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
}
.van-loading__spinner--spinner {
color: $gray;
}
circle {
stroke: $gray;
}
}
&--white { &--white {
.van-loading__spinner--circle { .van-loading__spinner--circle {
border-color: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1);
@ -98,14 +83,6 @@
.van-loading__spinner--gradient-circle { .van-loading__spinner--gradient-circle {
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png'); background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
} }
.van-loading__spinner--spinner {
color: #fff;
}
circle {
stroke: $white;
}
} }
} }