blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] Sku button border radius (#378)

Browse Source
This commit is contained in:
neverland 2017-12-05 14:36:22 +08:00 committed by GitHub
parent 32801b453b
commit 056f847824
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 22 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/demos/views/sku.vue
View File

@ -42,13 +42,9 @@
<!-- 自定义sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
积分兑换
</button>
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
买买买
</button>
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
</div>
</template>
</van-sku>

8
docs/markdown/en-US/sku.md
View File

@ -49,13 +49,9 @@ Vue.component(Sku.name, Sku);
<!-- 自定义sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
积分兑换
</button>
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
买买买
</button>
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
</div>
</template>
</van-sku>

6
docs/markdown/zh-CN/button.md
View File

@ -58,14 +58,14 @@ Vue.component(Button.name, Button);
#### 页面底部操作按钮
```html
<van-button type="primary" bottom-action>按钮</van-button>
<van-button type="primary" bottomAction>按钮</van-button>
<van-row>
<van-col span="12">
<van-button bottom-action>按钮</van-button>
<van-button bottomAction>按钮</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottom-action>按钮</van-button>
<van-button type="primary" bottomAction>按钮</van-button>
</van-col>
</van-row>
```

8
docs/markdown/zh-CN/sku.md
View File

@ -49,13 +49,9 @@ Vue.component(Sku.name, Sku);
<!-- 自定义sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
积分兑换
</button>
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
买买买
</button>
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
</div>
</template>
</van-sku>

14
packages/sku/components/SkuActions.vue
View File

@ -1,18 +1,20 @@
<template>
<div class="van-sku-actions">
<button v-if="showAddCartBtn" class="van-sku__add-cart-btn" @click="onAddCartClicked">
加入购物车
</button>
<button class="van-sku__buy-btn" @click="onBuyClicked">
{{ buyText }}
</button>
<van-button v-if="showAddCartBtn" bottomAction @click="onAddCartClicked">加入购物车</van-button>
<van-button type="primary" bottomAction @click="onBuyClicked">{{ buyText }}</van-button>
</div>
</template>
<script>
import Button from '../../button';
export default {
name: 'van-sku-actions',
components: {
[Button.name]: Button
},
props: {
skuEventBus: Object,
showAddCartBtn: Boolean,

30
packages/vant-css/src/sku.css
View File

@ -174,35 +174,7 @@
/* sku actions */
&-actions {
display: flex;
margin-top: 10px;
font-size: 0;
}
&__add-cart-btn {
width: 50%;
height: 50px;
padding: 0;
border: 0;
background: #f85;
color: $white;
font-size: 16px;
line-height: 50px;
text-align: center;
& + .van-sku__buy-btn {
width: 50%;
}
}
&__buy-btn {
width: 100%;
height: 50px;
padding: 0;
border: 0;
background: $red;
color: $white;
font-size: 16px;
line-height: 50px;
text-align: center;
}
}

8
test/unit/specs/sku.spec.js
View File

@ -82,8 +82,8 @@ describe('Sku', (done) => {
const buyCallback = sinon.spy();
const addCartCallback = sinon.spy();
const buyBtn = wrapper.find('.van-sku__buy-btn')[0];
const addCartBtn = wrapper.find('.van-sku__add-cart-btn')[0];
const buyBtn = wrapper.find('.van-button--bottom-action')[1];
const addCartBtn = wrapper.find('.van-button--bottom-action')[0];
wrapper.vm.$on('buy-clicked', buyCallback);
wrapper.vm.$on('add-cart', addCartCallback);
@ -187,7 +187,7 @@ describe('Sku', (done) => {
}
});
const buyBtn = wrapper.find('.van-sku__buy-btn')[0];
const buyBtn = wrapper.find('.van-button--bottom-action')[0];
const skuMessages = wrapper.find('.van-sku-messages')[0];
const inputs = skuMessages.find('input');
const textarea = skuMessages.find('textarea')[0];
@ -272,7 +272,7 @@ describe('Sku', (done) => {
}
});
const buyBtn = wrapper.find('.van-sku__buy-btn')[0];
const buyBtn = wrapper.find('.van-button--bottom-action')[0];
wrapper.vm.$nextTick(() => {
buyBtn.trigger('click');