fix(GoodsAction): incorrect single button radius (#6347)

This commit is contained in:
neverland 2020-05-23 15:14:53 +08:00 committed by GitHub
parent 1962194499
commit 0daf9e6bcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 25 additions and 32 deletions

View File

@ -9,12 +9,14 @@
&--first {
margin-left: 5px;
border-radius: @border-radius-max 0 0 @border-radius-max;
border-top-left-radius: @border-radius-max;
border-bottom-left-radius: @border-radius-max;
}
&--last {
margin-right: 5px;
border-radius: 0 @border-radius-max @border-radius-max 0;
border-top-right-radius: @border-radius-max;
border-bottom-right-radius: @border-radius-max;
}
&--warning {

View File

@ -19,16 +19,8 @@ Vue.use(GoodsActionIcon);
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
<van-goods-action-button
type="warning"
text="Button1"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
text="Button2"
@click="onClickButton"
/>
<van-goods-action-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
<van-goods-action-button type="danger" text="Button" @click="onClickButton" />
</van-goods-action>
```
@ -56,8 +48,8 @@ Use `badge` prop to show badge in icon
<van-goods-action-icon icon="chat-o" text="Icon1" dot />
<van-goods-action-icon icon="cart-o" text="Icon2" badge="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
<van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" />
<van-goods-action-button type="warning" text="Button" />
<van-goods-action-button type="danger" text="Button" />
</van-goods-action>
```
@ -68,8 +60,8 @@ Use `badge` prop to show badge in icon
<van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
<van-goods-action-icon icon="cart-o" text="Icon2" />
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
<van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" />
<van-goods-action-button type="warning" text="Button" />
<van-goods-action-button type="danger" text="Button" />
</van-goods-action>
```
@ -79,8 +71,8 @@ Use `badge` prop to show badge in icon
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" />
<van-goods-action-icon icon="shop-o" text="Icon2" />
<van-goods-action-button color="#be99ff" type="warning" text="Button1" />
<van-goods-action-button color="#7232dd" type="danger" text="Button2" />
<van-goods-action-button color="#be99ff" type="warning" text="Button" />
<van-goods-action-button color="#7232dd" type="danger" text="Button" />
</van-goods-action>
```

View File

@ -19,11 +19,7 @@ Vue.use(GoodsActionIcon);
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-goods-action-button
type="warning"
text="加入购物车"
@click="onClickButton"
/>
<van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
<van-goods-action-button
type="danger"
text="立即购买"

View File

@ -12,10 +12,10 @@
:text="t('icon2')"
@click="onClickIcon"
/>
<van-goods-action-button
type="warning"
:text="t('button1')"
@click="onClickButton"
<van-goods-action-icon
icon="shop-o"
:text="t('icon3')"
@click="onClickIcon"
/>
<van-goods-action-button
type="danger"
@ -92,8 +92,8 @@ export default {
icon1: 'Icon1',
icon2: 'Icon2',
icon3: 'Icon3',
button1: 'Button1',
button2: 'Button2',
button1: 'Button',
button2: 'Button',
iconBadge: 'Icon Badge',
collected: 'Collected',
clickIcon: 'Click Icon',

View File

@ -13,9 +13,12 @@ exports[`renders demo correctly 1`] = `
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!---->
</div>购物车
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
<div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
</button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
<!---->
</div>店铺
</div> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--last van-goods-action-button--danger">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>