[breaking change] GoodsAction: remove primary prop, add type prop

This commit is contained in:
陈嘉涵 2019-04-29 16:49:42 +08:00
parent 138790b3e3
commit e417ad0e8b
6 changed files with 30 additions and 15 deletions

View File

@ -23,8 +23,11 @@
### GoodsAction ### GoodsAction
- [ ] GoodsActionBigBtn 重命名为 GoodsActionButton - [x] GoodsActionBigBtn 重命名为 GoodsActionButton
- [ ] GoodsActionMiniBtn 重命名为 GoodsActionIcon - [x] GoodsActionMiniBtn 重命名为 GoodsActionIcon
- [x] GoodsActionBigBtn 移除 primary 属性,新增 type 属性
改动原因:规范命名,统一用法
### Step ### Step

View File

@ -1,5 +1,5 @@
import { use } from '../utils'; import { use } from '../utils';
import Button, { ButtonEvents } from '../button'; import Button, { ButtonType, ButtonEvents } from '../button';
import { emit, inherit } from '../utils/functional'; import { emit, inherit } from '../utils/functional';
import { functionalRoute, routeProps, RouteProps } from '../utils/router'; import { functionalRoute, routeProps, RouteProps } from '../utils/router';
@ -9,6 +9,7 @@ import { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionButtonProps = RouteProps & { export type GoodsActionButtonProps = RouteProps & {
text?: string; text?: string;
type?: ButtonType;
primary?: boolean; primary?: boolean;
loading?: boolean; loading?: boolean;
disabled?: boolean; disabled?: boolean;
@ -32,9 +33,9 @@ function GoodsActionButton(
square square
class={bem()} class={bem()}
size="large" size="large"
type={props.type}
loading={props.loading} loading={props.loading}
disabled={props.disabled} disabled={props.disabled}
type={props.primary ? 'danger' : 'warning'}
onClick={onClick} onClick={onClick}
{...inherit(ctx)} {...inherit(ctx)}
> >
@ -45,8 +46,8 @@ function GoodsActionButton(
GoodsActionButton.props = { GoodsActionButton.props = {
...routeProps, ...routeProps,
type: String,
text: String, text: String,
primary: Boolean,
loading: Boolean, loading: Boolean,
disabled: Boolean disabled: Boolean
}; };

View File

@ -13,11 +13,12 @@
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-button <van-goods-action-button
type="warning"
:text="$t('button1')" :text="$t('button1')"
@click="onClickButton" @click="onClickButton"
/> />
<van-goods-action-button <van-goods-action-button
primary type="danger"
:text="$t('button2')" :text="$t('button2')"
@click="onClickButton" @click="onClickButton"
/> />
@ -43,11 +44,12 @@
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-button <van-goods-action-button
type="warning"
:text="$t('button1')" :text="$t('button1')"
@click="onClickButton" @click="onClickButton"
/> />
<van-goods-action-button <van-goods-action-button
primary type="danger"
:text="$t('button2')" :text="$t('button2')"
@click="onClickButton" @click="onClickButton"
/> />

View File

@ -30,11 +30,12 @@ Vue
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-button <van-goods-action-button
type="warning"
text="Button1" text="Button1"
@click="onClickButton" @click="onClickButton"
/> />
<van-goods-action-button <van-goods-action-button
primary type="danger"
text="Button2" text="Button2"
@click="onClickButton" @click="onClickButton"
/> />
@ -73,9 +74,12 @@ Use `info` prop to show messages in upper right corner of icon
icon="shop-o" icon="shop-o"
text="Icon3" text="Icon3"
/> />
<van-goods-action-button text="Button1" />
<van-goods-action-button <van-goods-action-button
primary type="warning"
text="Button1"
/>
<van-goods-action-button
type="danger"
text="Button2" text="Button2"
/> />
</van-goods-action> </van-goods-action>
@ -104,6 +108,7 @@ Use `info` prop to show messages in upper right corner of icon
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| type | Button type, Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
| text | Button text | `String` | - | | text | Button text | `String` | - |
| primary | Is primary button (red color) | `Boolean` | `false` | | primary | Is primary button (red color) | `Boolean` | `false` |
| disabled | Whether to disable button | `Boolean` | `false` | | disabled | Whether to disable button | `Boolean` | `false` |

View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button render default slot 1`] = `<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`; exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`;
exports[`Icon render default slot 1`] = ` exports[`Icon render default slot 1`] = `
<div class="van-goods-action-icon van-hairline"> <div class="van-goods-action-icon van-hairline">

View File

@ -30,11 +30,12 @@ Vue
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-button <van-goods-action-button
type="warning"
text="加入购物车" text="加入购物车"
@click="onClickButton" @click="onClickButton"
/> />
<van-goods-action-button <van-goods-action-button
primary type="danger"
text="立即购买" text="立即购买"
@click="onClickButton" @click="onClickButton"
/> />
@ -72,9 +73,12 @@ export default {
icon="shop-o" icon="shop-o"
text="店铺" text="店铺"
/> />
<van-goods-action-button text="加入购物车" />
<van-goods-action-button <van-goods-action-button
primary type="warning"
text="加入购物车"
/>
<van-goods-action-button
type="danger"
text="立即购买" text="立即购买"
/> />
</van-goods-action> </van-goods-action>
@ -105,7 +109,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| text | 按钮文字 | `String` | - | - | | text | 按钮文字 | `String` | - | - |
| primary | 是否为红色按钮 | `Boolean` | `false` | - | | type | 按钮类型,可选值为 `primary` `info` `warning` `danger` | `String` | `default` |
| disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 | | disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 | | loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |