[breaking change] Button: remove bottom-action prop

This commit is contained in:
陈嘉涵 2019-04-29 14:31:13 +08:00
parent b8424f8de9
commit 0392db1817
9 changed files with 58 additions and 35 deletions

View File

@ -2,11 +2,15 @@
### Actionsheet
- [x] 重命名为 ActionSheet
- [x] 重命名为 ActionSheet
改动原因:规范命名
### Button
- [ ] 移除 bottom-action 属性
- [x] 移除 bottom-action 属性
改动原因:冗余属性,可以被 square 和 size="large" 代替
### Field

View File

@ -12,6 +12,7 @@ export default {
'style-guide.zh-CN': () => import('../markdown/style-guide.zh-CN.md'),
'theme.en-US': () => import('../markdown/theme.en-US.md'),
'theme.zh-CN': () => import('../markdown/theme.zh-CN.md'),
'v2-progress-tracking': () => import('../markdown/v2-progress-tracking.md'),
'action-sheet.en-US': () => import('../../packages/action-sheet/en-US.md'),
'action-sheet.zh-CN': () => import('../../packages/action-sheet/zh-CN.md'),
'address-edit.en-US': () => import('../../packages/address-edit/en-US.md'),

View File

@ -131,21 +131,6 @@
display: block;
}
&--bottom-action {
border: 0;
width: 100%;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 0;
color: @button-bottom-action-default-color;
background-color: @button-bottom-action-default-background-color;
&.van-button--primary {
background-color: @button-bottom-action-primary-background-color;
}
}
&--disabled {
opacity: @button-disabled-opacity;
}

View File

@ -26,7 +26,6 @@ export type ButtonProps = RouteProps & {
nativeType?: string;
loadingSize: string;
loadingText?: string;
bottomAction?: boolean;
};
export type ButtonEvents = {
@ -65,8 +64,7 @@ function Button(
block: props.block,
plain: props.plain,
round: props.round,
square: props.square,
'bottom-action': props.bottomAction
square: props.square
}
]),
{ 'van-hairline--surround': hairline }
@ -108,7 +106,6 @@ Button.props = {
disabled: Boolean,
nativeType: String,
loadingText: String,
bottomAction: Boolean,
tag: {
type: String,
default: 'button'

View File

@ -27,11 +27,18 @@ function SkuActions(
return (
<div class={bem()} {...inherit(ctx)}>
{props.showAddCartBtn && (
<Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} />
<Button
square
size="large"
type="warning"
text="加入购物车"
onClick={emit('sku:addCart')}
/>
)}
<Button
type="primary"
bottomAction
square
size="large"
type="danger"
text={props.buyText || '立即购买'}
onClick={emit('sku:buy')}
/>

View File

@ -117,14 +117,17 @@
>
<div class="van-sku-actions">
<van-button
bottom-action
square
size="large"
type="warning"
@click="onPointClicked"
>
{{ $t('button1') }}
</van-button>
<van-button
type="primary"
bottom-action
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
{{ $t('button2') }}

View File

@ -70,12 +70,27 @@ Vue.use(Sku);
<span class="van-sku__price-symbol"></span><span class="van-sku__price-num">{{ props.price }}</span>
</div>
</template>
<!-- custom sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<van-button bottom-action @click="onPointClicked">Button</van-button>
<van-button
square
size="large"
type="warning"
@click="onPointClicked"
>
Button
</van-button>
<!-- trigger sku inner event -->
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
<van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
Button
</van-button>
</div>
</template>
</van-sku>

View File

@ -71,12 +71,27 @@ Vue.use(Sku);
<span class="van-sku__price-symbol"></span><span class="van-sku__price-num">{{ props.price }}</span>
</div>
</template>
<!-- 自定义 sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<van-button bottom-action @click="onPointClicked">积分兑换</van-button>
<van-button
square
size="large"
type="warning"
@click="onPointClicked"
>
积分兑换
</van-button>
<!-- 直接触发 sku 内部事件,通过内部事件执行 onBuyClicked 回调 -->
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
<van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
买买买
</van-button>
</div>
</template>
</van-sku>

View File

@ -77,10 +77,6 @@
@button-warning-color: @white;
@button-warning-background-color: @orange;
@button-warning-border-color: @orange;
@button-bottom-action-default-color: @white;
@button-bottom-action-default-background-color: @orange;
@button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red;
@button-border-width: 1px;
@button-border-radius: 2px;
@button-round-border-radius: 10em;