ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 18:54:24 +00:00
Code Issues Actions 3 Packages 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
15 changed files with 40 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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` |