blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-10 18:52: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>
<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 class="van-picker__columns" 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>
<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
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>
<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 class="van-list">
<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>

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

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

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

@ -12,14 +12,14 @@ Vue.use(Loading);
#### Circular
```html
<van-loading color="black" />
<van-loading />
<van-loading color="white" />
```
#### Spinner
```html
<van-loading type="spinner" color="black" />
<van-loading type="spinner" />
<van-loading type="spinner" color="white" />
```
@ -27,6 +27,6 @@ Vue.use(Loading);
| 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` |
| size | Size | `String` | `30px` |

16
packages/loading/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="b([type, color])" :style="style">
<div :class="b([type, colorType])" :style="style">
<span :class="b('spinner', type)">
<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">
@ -12,6 +12,8 @@
<script>
import create from '../utils/create-basic';
const DEFAULT_COLOR = '#c9c9c9';
export default create({
name: 'loading',
@ -23,16 +25,22 @@ export default create({
},
color: {
type: String,
default: 'black'
default: DEFAULT_COLOR
}
},
computed: {
colorType() {
const { color } = this;
return color === 'white' || color === 'black' ? color : '';
},
style() {
return this.size ? {
return {
color: this.color === 'black' ? DEFAULT_COLOR : this.color,
width: 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`] = `
<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--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" 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"
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 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--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" 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" 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>
`;

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

@ -12,14 +12,14 @@ Vue.use(Loading);
#### Circular
```html
<van-loading color="black" />
<van-loading />
<van-loading color="white" />
```
#### Spinner
```html
<van-loading type="spinner" color="black" />
<van-loading type="spinner" />
<van-loading type="spinner" color="white" />
```
@ -27,6 +27,6 @@ Vue.use(Loading);
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| color | 颜色，可选值为 `white` | `String` | `black` |
| color | 颜色 | `String` | `#c9c9c9` |
| type | 类型，可选值为 `spinner` | `String` | `circular` |
| 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__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 class="van-picker__columns" 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-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>
@ -46,7 +46,7 @@ exports[`change head content when pulling down 4`] = `
<!---->
<!---->
<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>

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

@ -30,7 +30,7 @@
<!-- 正在上传的图片,有上传等待提示 -->
<div v-if="paddingImg" :class="b('img')">
<img :src="paddingImg">
<loading :class="b('uploading')" type="spinner" color="black" />
<loading :class="b('uploading')" type="spinner" />
</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__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">
<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>
</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 title="标题" class="van-switch van-switch--on" style="font-size:26px;">
<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>

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

@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-switch van-switch--on" style="font-size:30px;">
<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>

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

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