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

[Improvement] Loading: change default type to circular (#623)

Browse Source
This commit is contained in:
neverland 2018-02-08 09:47:15 +08:00 committed by GitHub
parent 2a3c75bc2f
commit c11c0bb4c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 50 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/demos/views/button.vue
View File

@ -92,6 +92,10 @@ export default {
&--normal { &--normal {
margin-right: 10px; margin-right: 10px;
} }
.van-loading {
margin: 0 18px;
}
} }
.van-doc-demo-block { .van-doc-demo-block {

29
docs/demos/views/loading.vue
View File

@ -1,23 +1,18 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('title1')"> <demo-block :title="$t('title1')">
<van-loading type="circle" color="black" /> <van-loading color="black" />
<van-loading type="circle" color="white" /> <van-loading color="white" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
</demo-block>
<demo-block :title="$t('title3')">
<van-loading type="spinner" color="black" /> <van-loading type="spinner" color="black" />
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="white" />
</demo-block> </demo-block>
<demo-block :title="$t('title4')"> <demo-block :title="$t('title3')">
<van-loading type="circular" color="black" /> <van-loading type="circle" color="black" />
<van-loading type="circular" color="white" /> <van-loading type="circle" color="white" />
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -26,16 +21,14 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title1: '单色圆环', title1: 'Circular',
title2: '渐变色圆环', title2: 'Spinner',
title3: 'Spinner', title3: 'Circle'
title4: 'Circular'
}, },
'en-US': { 'en-US': {
title1: 'Solid Circle', title1: 'Circular',
title2: 'Gradient Circle', title2: 'Spinner',
title3: 'Spinner', title3: 'Circle'
title4: 'Circular'
} }
} }
}; };

3
docs/demos/views/toast.vue
View File

@ -23,6 +23,7 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
loading: '加载中',
title1: '文字提示', title1: '文字提示',
title2: '加载提示', title2: '加载提示',
title3: '成功/失败提示', title3: '成功/失败提示',
@ -52,7 +53,7 @@ export default {
}, },
showLoadingToast() { showLoadingToast() {
Toast.loading({ mask: true }); Toast.loading({ mask: true, message: this.$t('loading') + '...' });
}, },
showSuccessToast() { showSuccessToast() {

21
docs/markdown/en-US/loading.md
View File

@ -9,18 +9,11 @@ Vue.use(Loading);
### Usage ### Usage
#### Solid Circle #### Circular
```html ```html
<van-loading type="circle" color="black" /> <van-loading color="black" />
<van-loading type="circle" color="white" /> <van-loading color="white" />
```
#### Gradient Circle
```html
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
``` ```
#### Spinner #### Spinner
@ -30,11 +23,11 @@ Vue.use(Loading);
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="white" />
``` ```
#### Circular #### Circle
```html ```html
<van-loading type="circular" color="black" /> <van-loading type="circle" color="black" />
<van-loading type="circular" color="white" /> <van-loading type="circle" color="white" />
``` ```
### API ### API
@ -42,5 +35,5 @@ Vue.use(Loading);
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| color | Color | `String` | `black` | `black` `white` | | color | Color | `String` | `black` | `black` `white` |
| type | Type | `String` | `gradient-circle` | `spinner` `circle` | | type | Type | `String` | `circular` | `spinner` `circle` |
| size | Size | `String` | `30px` | - | | size | Size | `String` | `30px` | - |

5
docs/markdown/en-US/toast.md
View File

@ -18,7 +18,10 @@ Toast('Some messages');
#### Loading #### Loading
```javascript ```javascript
Toast.loading({ mask: true }); Toast.loading({
mask: true,
message: 'Loading...'
});
``` ```

21
docs/markdown/zh-CN/loading.md
View File

@ -9,18 +9,11 @@ Vue.use(Loading);
### 代码演示 ### 代码演示
#### 单色圆环 #### Circular
```html ```html
<van-loading type="circle" color="black" /> <van-loading color="black" />
<van-loading type="circle" color="white" /> <van-loading color="white" />
```
#### 渐变色圆环
```html
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
``` ```
#### Spinner #### Spinner
@ -30,11 +23,11 @@ Vue.use(Loading);
<van-loading type="spinner" color="white" /> <van-loading type="spinner" color="white" />
``` ```
#### Circular #### Circle
```html ```html
<van-loading type="circular" color="black" /> <van-loading type="circle" color="black" />
<van-loading type="circular" color="white" /> <van-loading type="circle" color="white" />
``` ```
### API ### API
@ -42,5 +35,5 @@ Vue.use(Loading);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| color | 颜色 | `String` | `black` | `black` `white` | | color | 颜色 | `String` | `black` | `black` `white` |
| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` | | type | 类型 | `String` | `circular` | `spinner` `circle` |
| size | 大小 | `String` | `30px` | - | | size | 大小 | `String` | `30px` | - |

5
docs/markdown/zh-CN/toast.md
View File

@ -18,7 +18,10 @@ Toast('我是提示文案，建议不超过十五字~');
#### 加载提示 #### 加载提示
```javascript ```javascript
Toast.loading({ mask: true }); Toast.loading({
mask: true,
message: '加载中...'
});
``` ```

2
packages/actionsheet/index.vue
View File

@ -17,7 +17,7 @@
<span class="van-actionsheet__name">{{ item.name }}</span> <span class="van-actionsheet__name">{{ item.name }}</span>
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span> <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
</template> </template>
<loading v-else class="van-actionsheet__loading" type="circle" /> <loading v-else class="van-actionsheet__loading" size="20px" />
</li> </li>
</ul> </ul>
<div <div

7
packages/button/index.vue
View File

@ -16,12 +16,7 @@
]" ]"
@click="onClick" @click="onClick"
> >
<loading <loading v-if="loading" size="20px" :color="type === 'default' ? 'black' : 'white'" />
v-if="loading"
class="van-button__icon-loading"
type="circle"
:color="type === 'default' ? 'black' : 'white'"
/>
<span class="van-button__text"> <span class="van-button__text">
<slot>{{ text }}</slot> <slot>{{ text }}</slot>
</span> </span>

2
packages/loading/index.vue
View File

@ -21,7 +21,7 @@ export default {
size: String, size: String,
type: { type: {
type: String, type: String,
default: 'gradient-circle' default: 'circular'
}, },
color: { color: {
type: String, type: String,

2
packages/picker/index.vue
View File

@ -8,7 +8,7 @@
</slot> </slot>
</div> </div>
<div v-if="loading" class="van-picker__loading"> <div v-if="loading" class="van-picker__loading">
<loading type="circular" /> <loading />
</div> </div>
<div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent> <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
<picker-column <picker-column

6
packages/toast/toast.vue
View File

@ -10,7 +10,7 @@
<template v-if="displayStyle === 'default'"> <template v-if="displayStyle === 'default'">
<loading v-if="type === 'loading'" color="white" /> <loading v-if="type === 'loading'" color="white" />
<icon v-else class="van-toast__icon" :name="type" /> <icon v-else class="van-toast__icon" :name="type" />
<div v-if="message !== undefined" class="van-toast__text">{{ message }}</div> <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
</template> </template>
</div> </div>
<div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" /> <div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
@ -49,6 +49,10 @@ export default create({
computed: { computed: {
displayStyle() { displayStyle() {
return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type; return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
},
hasMessage() {
return this.message || this.message === 0;
} }
} }
}); });

4
packages/vant-css/src/button.css
View File

@ -31,10 +31,6 @@
opacity: .3; opacity: .3;
} }
&__icon-loading {
display: inline-block;
}
&--default { &--default {
color: $button-default-color; color: $button-default-color;
background-color: $button-default-background-color; background-color: $button-default-background-color;

6
packages/vant-css/src/switch.css
View File

@ -30,13 +30,11 @@
} }
&__loading { &__loading {
top: 50%;
left: 50%;
width: 16px; width: 16px;
height: 16px; height: 16px;
position: relative;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
margin: 0;
} }
&--on { &--on {