[improvement] GoodsAction: add loading & disabled prop (#1994)

This commit is contained in:
neverland 2018-10-29 19:30:08 +08:00 committed by GitHub
parent 917473aaff
commit 28bb312320
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 44 deletions

View File

@ -1,10 +1,11 @@
<template>
<van-button
tag="a"
:href="url"
square
:class="b()"
:type="primary ? 'primary' : 'default'"
bottom-action
size="large"
:loading="loading"
:disabled="disabled"
:type="primary ? 'danger' : 'warning'"
@click="onClick"
>
<slot>{{ text }}</slot>
@ -26,9 +27,10 @@ export default create({
},
props: {
url: String,
text: String,
primary: Boolean
primary: Boolean,
loading: Boolean,
disabled: Boolean
},
methods: {

View File

@ -1,8 +1,8 @@
<template>
<a :href="url" :class="b()" class="van-hairline" @click="onClick">
<div :class="b()" class="van-hairline" @click="onClick">
<icon :class="[b('icon'), iconClass]" :info="info" :name="icon" />
<slot>{{ text }}</slot>
</a>
</div>
</template>
<script>
@ -15,7 +15,6 @@ export default create({
mixins: [RouterLink],
props: {
url: String,
text: String,
info: [String, Number],
icon: String,

View File

@ -73,6 +73,8 @@ Use `info` prop to show messages in upper right corner of icon
|------|------|------|------|
| text | Button text | `String` | - |
| primary | Is primary button (red color) | `Boolean` | `false` |
| disabled | Whether to disable button | `Boolean` | `false` |
| loading | Whether show loading status | `Boolean` | `false` |
| url | Link | `String` | - |
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
| replace | If true, the navigation will not leave a history record | `String` | `false` |

View File

@ -4,34 +4,34 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-goods-action">
<a class="van-hairline van-goods-action-mini-btn">
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
</i> 客服</a>
<a class="van-hairline van-goods-action-mini-btn">
</i> 客服</div>
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
</i> 购物车</a>
<a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></a>
<a class="van-button van-button--primary van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">立即购买</span></a>
</i> 购物车</div>
<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button>
<button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
</div>
</div>
<div>
<div class="van-goods-action">
<a class="van-hairline van-goods-action-mini-btn">
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
</i> 客服</a>
<a class="van-hairline van-goods-action-mini-btn">
</i> 客服</div>
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<div class="van-info">5</div>
</i> 购物车</a>
<a class="van-hairline van-goods-action-mini-btn">
</i> 购物车</div>
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
</i> 店铺</a>
<a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></a>
<a class="van-button van-button--primary van-button--normal van-button--bottom-action van-goods-action-big-btn"><span class="van-button__text">立即购买</span></a>
</i> 店铺</div>
<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button>
<button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
</div>
</div>
</div>

View File

@ -72,6 +72,8 @@ export default {
|------|------|------|------|------|
| text | 按钮文字 | `String` | - | - |
| primary | 是否为红色按钮 | `Boolean` | `false` | - |
| disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |

View File

@ -43,27 +43,6 @@ const Component = {
}
};
test('autoplay', async() => {
const wrapper = mount(Component, {
propsData: {
autoplay: 20
}
});
const { swipe } = wrapper.vm.$refs;
await later(60);
expect(swipe.active).toEqual(1);
wrapper.setData({ autoplay: 0 });
await later(60);
expect(swipe.active).toEqual(1);
wrapper.setData({ autoplay: 20 });
await later(60);
expect(swipe.active).toEqual(2);
wrapper.destroy();
});
test('swipeTo', async() => {
const wrapper = mount(Component);
const { swipe } = wrapper.vm.$refs;