mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-26 00:09:15 +08:00
[improvement] GoodsAction: add loading & disabled prop (#1994)
This commit is contained in:
parent
917473aaff
commit
28bb312320
@ -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: {
|
||||
|
@ -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,
|
||||
|
@ -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` |
|
||||
|
@ -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>
|
||||
|
@ -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` | - |
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user