mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[breaking change] Button: remove bottom-action prop
This commit is contained in:
parent
b8424f8de9
commit
0392db1817
@ -2,11 +2,15 @@
|
||||
|
||||
### Actionsheet
|
||||
|
||||
- [x] 重命名为 ActionSheet
|
||||
- [x] 重命名为 ActionSheet
|
||||
|
||||
改动原因:规范命名
|
||||
|
||||
### Button
|
||||
|
||||
- [ ] 移除 bottom-action 属性
|
||||
- [x] 移除 bottom-action 属性
|
||||
|
||||
改动原因:冗余属性,可以被 square 和 size="large" 代替
|
||||
|
||||
### Field
|
||||
|
||||
|
@ -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'),
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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'
|
||||
|
@ -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')}
|
||||
/>
|
||||
|
@ -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') }}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user