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

[breaking change] GoodsAction: rename component

Browse Source
This commit is contained in:
陈嘉涵 2019-04-29 16:40:50 +08:00
parent 706f047909
commit 138790b3e3
13 changed files with 114 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/goods-action-big-btn/index.less → packages/goods-action-button/index.less
View File

@ -1,6 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-goods-action-big-btn { .van-goods-action-button {
flex: 1; flex: 1;
padding: 0; padding: 0;

14
packages/goods-action-big-btn/index.tsx → packages/goods-action-button/index.tsx
View File

@ -7,20 +7,20 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router';
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc'; import { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionBigBtnProps = RouteProps & { export type GoodsActionButtonProps = RouteProps & {
text?: string; text?: string;
primary?: boolean; primary?: boolean;
loading?: boolean; loading?: boolean;
disabled?: boolean; disabled?: boolean;
}; };
const [sfc, bem] = use('goods-action-big-btn'); const [sfc, bem] = use('goods-action-button');
function GoodsActionBigBtn( function GoodsActionButton(
h: CreateElement, h: CreateElement,
props: GoodsActionBigBtnProps, props: GoodsActionButtonProps,
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<GoodsActionBigBtnProps> ctx: RenderContext<GoodsActionButtonProps>
) { ) {
const onClick = (event: Event) => { const onClick = (event: Event) => {
emit(ctx, 'click', event); emit(ctx, 'click', event);
@ -43,7 +43,7 @@ function GoodsActionBigBtn(
); );
} }
GoodsActionBigBtn.props = { GoodsActionButton.props = {
...routeProps, ...routeProps,
text: String, text: String,
primary: Boolean, primary: Boolean,
@ -51,4 +51,4 @@ GoodsActionBigBtn.props = {
disabled: Boolean disabled: Boolean
}; };
export default sfc<GoodsActionBigBtnProps, ButtonEvents>(GoodsActionBigBtn); export default sfc<GoodsActionButtonProps, ButtonEvents>(GoodsActionButton);

2
packages/goods-action-mini-btn/index.less → packages/goods-action-icon/index.less
View File

@ -1,6 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-goods-action-mini-btn { .van-goods-action-icon {
color: @gray-darker; color: @gray-darker;
display: flex; display: flex;
height: 50px; height: 50px;

14
packages/goods-action-mini-btn/index.tsx → packages/goods-action-icon/index.tsx
View File

@ -7,20 +7,20 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router';
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc'; import { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionMiniBtnProps = RouteProps & { export type GoodsActionIconProps = RouteProps & {
icon: string; icon: string;
text?: string; text?: string;
info?: string | number; info?: string | number;
iconClass?: any; iconClass?: any;
}; };
const [sfc, bem] = use('goods-action-mini-btn'); const [sfc, bem] = use('goods-action-icon');
function GoodsActionMiniBtn( function GoodsActionIcon(
h: CreateElement, h: CreateElement,
props: GoodsActionMiniBtnProps, props: GoodsActionIconProps,
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<GoodsActionMiniBtnProps> ctx: RenderContext<GoodsActionIconProps>
) { ) {
const onClick = (event: Event) => { const onClick = (event: Event) => {
emit(ctx, 'click', event); emit(ctx, 'click', event);
@ -40,7 +40,7 @@ function GoodsActionMiniBtn(
); );
} }
GoodsActionMiniBtn.props = { GoodsActionIcon.props = {
...routeProps, ...routeProps,
text: String, text: String,
icon: String, icon: String,
@ -48,4 +48,4 @@ GoodsActionMiniBtn.props = {
iconClass: null as any iconClass: null as any
}; };
export default sfc<GoodsActionMiniBtnProps, IconEvents>(GoodsActionMiniBtn); export default sfc<GoodsActionIconProps, IconEvents>(GoodsActionIcon);

40
packages/goods-action/demo/index.vue
View File

@ -2,54 +2,54 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="$t('icon1')" :text="$t('icon1')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
:text="$t('icon2')" :text="$t('icon2')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
:text="$t('button1')" :text="$t('button1')"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary primary
:text="$t('button2')" :text="$t('button2')"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="$t('icon1')" :text="$t('icon1')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
info="5" info="5"
:text="$t('icon2')" :text="$t('icon2')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="shop-o" icon="shop-o"
:text="$t('icon3')" :text="$t('icon3')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
:text="$t('button1')" :text="$t('button1')"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary primary
:text="$t('button2')" :text="$t('button2')"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
@ -82,11 +82,11 @@ export default {
}, },
methods: { methods: {
onClickMiniBtn() { onClickIcon() {
this.$toast(this.$t('clickIcon')); this.$toast(this.$t('clickIcon'));
}, },
onClickBigBtn() { onClickButton() {
this.$toast(this.$t('clickButton')); this.$toast(this.$t('clickButton'));
} }
} }

42
packages/goods-action/en-US.md
View File

@ -4,14 +4,14 @@
``` javascript ``` javascript
import { import {
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionButton,
GoodsActionMiniBtn GoodsActionIcon
} from 'vant'; } from 'vant';
Vue Vue
.use(GoodsAction) .use(GoodsAction)
.use(GoodsActionBigBtn) .use(GoodsActionButton)
.use(GoodsActionMiniBtn); .use(GoodsActionIcon);
``` ```
### Usage ### Usage
@ -19,24 +19,24 @@ Vue
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="Icon1" text="Icon1"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
text="Icon2" text="Icon2"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
text="Button1" text="Button1"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary primary
text="Button2" text="Button2"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
``` ```
@ -44,10 +44,10 @@ Vue
```javascript ```javascript
export default { export default {
methods: { methods: {
onClickMiniBtn() { onClickIcon() {
Toast('Click Icon'); Toast('Click Icon');
}, },
onClickBigBtn() { onClickButton() {
Toast('Click Button'); Toast('Click Button');
} }
} }
@ -60,21 +60,21 @@ Use `info` prop to show messages in upper right corner of icon
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="Icon1" text="Icon1"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
info="5" info="5"
icon="cart-o" icon="cart-o"
text="Icon2" text="Icon2"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="shop-o" icon="shop-o"
text="Icon3" text="Icon3"
/> />
<van-goods-action-big-btn text="Button1" /> <van-goods-action-button text="Button1" />
<van-goods-action-big-btn <van-goods-action-button
primary primary
text="Button2" text="Button2"
/> />
@ -88,7 +88,7 @@ Use `info` prop to show messages in upper right corner of icon
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
#### GoodsActionMiniBtn #### GoodsActionIcon
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
@ -100,7 +100,7 @@ Use `info` prop to show messages in upper right corner of icon
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
| replace | If true, the navigation will not leave a history record | `Boolean` | `false` | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
#### GoodsActionBigBtn #### GoodsActionButton
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|

24
packages/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -4,35 +4,35 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-goods-action"> <div class="van-goods-action">
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!----> <!---->
</div>客服 </div>客服
</div> </div>
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!----> <!---->
</div>购物车 </div>购物车
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button> </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
</div> </div>
</div> </div>
<div> <div>
<div class="van-goods-action"> <div class="van-goods-action">
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!----> <!---->
</div>客服 </div>客服
</div> </div>
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<div class="van-info">5</div> <div class="van-info">5</div>
</div>购物车 </div>购物车
</div> </div>
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
<!----> <!---->
</div>店铺 </div>店铺
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button> </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
</div> </div>
</div> </div>
</div> </div>

8
packages/goods-action/test/__snapshots__/index.spec.js.snap
View File

@ -1,10 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BigBtn render default slot 1`] = `<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">Default Content</span></button>`; 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[`Mini render default slot 1`] = ` exports[`Icon render default slot 1`] = `
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-undefined van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-undefined van-goods-action-icon__icon">
<!----> <!---->
</div>Default Content </div>Default Content
</div> </div>

20
packages/goods-action/test/index.spec.js
View File

@ -1,10 +1,10 @@
import BigBtn from '../../goods-action-big-btn'; import Button from '../../goods-action-button';
import MiniBtn from '../../goods-action-mini-btn'; import Icon from '../../goods-action-icon';
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
test('BigBtn click event', () => { test('Button click event', () => {
const click = jest.fn(); const click = jest.fn();
const wrapper = mount(BigBtn, { const wrapper = mount(Button, {
context: { context: {
on: { on: {
click click
@ -16,9 +16,9 @@ test('BigBtn click event', () => {
expect(click).toHaveBeenCalledTimes(1); expect(click).toHaveBeenCalledTimes(1);
}); });
test('MiniBtn click event', () => { test('Icon click event', () => {
const click = jest.fn(); const click = jest.fn();
const wrapper = mount(MiniBtn, { const wrapper = mount(Icon, {
context: { context: {
on: { on: {
click click
@ -30,20 +30,20 @@ test('MiniBtn click event', () => {
expect(click).toHaveBeenCalledTimes(1); expect(click).toHaveBeenCalledTimes(1);
}); });
test('BigBtn render default slot', () => { test('Button render default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(BigBtn, null, ['Default Content']); return h(Button, null, ['Default Content']);
} }
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('Mini render default slot', () => { test('Icon render default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(MiniBtn, null, ['Default Content']); return h(Icon, null, ['Default Content']);
} }
}); });

42
packages/goods-action/zh-CN.md
View File

@ -4,14 +4,14 @@
``` javascript ``` javascript
import { import {
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionIcon,
GoodsActionMiniBtn GoodsActionButton
} from 'vant'; } from 'vant';
Vue Vue
.use(GoodsAction) .use(GoodsAction)
.use(GoodsActionBigBtn) .use(GoodsActionIcon)
.use(GoodsActionMiniBtn); .use(GoodsActionButton);
``` ```
### 代码演示 ### 代码演示
@ -19,24 +19,24 @@ Vue
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="客服" text="客服"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
text="购物车" text="购物车"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
text="加入购物车" text="加入购物车"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary primary
text="立即购买" text="立即购买"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
``` ```
@ -44,10 +44,10 @@ Vue
```javascript ```javascript
export default { export default {
methods: { methods: {
onClickMiniBtn() { onClickIcon() {
Toast('点击图标'); Toast('点击图标');
}, },
onClickBigBtn() { onClickButton() {
Toast('点击按钮'); Toast('点击按钮');
} }
} }
@ -59,21 +59,21 @@ export default {
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="客服" text="客服"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
info="5" info="5"
icon="cart-o" icon="cart-o"
text="购物车" text="购物车"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="shop-o" icon="shop-o"
text="店铺" text="店铺"
/> />
<van-goods-action-big-btn text="加入购物车" /> <van-goods-action-button text="加入购物车" />
<van-goods-action-big-btn <van-goods-action-button
primary primary
text="立即购买" text="立即购买"
/> />
@ -88,7 +88,7 @@ export default {
|------|------|------|------|------| |------|------|------|------|------|
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 | | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
#### GoodsActionMiniBtn #### GoodsActionIcon
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
@ -100,7 +100,7 @@ export default {
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
#### GoodsActionBigBtn #### GoodsActionButton
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|

4
packages/index.less
View File

@ -67,7 +67,7 @@
@import './coupon-cell/index'; @import './coupon-cell/index';
@import './coupon-list/index'; @import './coupon-list/index';
@import './goods-action/index'; @import './goods-action/index';
@import './goods-action-big-btn/index'; @import './goods-action-button/index';
@import './goods-action-mini-btn/index'; @import './goods-action-icon/index';
@import './submit-bar/index'; @import './submit-bar/index';
@import './sku/index'; @import './sku/index';

12
packages/index.ts
View File

@ -27,8 +27,8 @@ import DatetimePicker from './datetime-picker';
import Dialog from './dialog'; import Dialog from './dialog';
import Field from './field'; import Field from './field';
import GoodsAction from './goods-action'; import GoodsAction from './goods-action';
import GoodsActionBigBtn from './goods-action-big-btn'; import GoodsActionButton from './goods-action-button';
import GoodsActionMiniBtn from './goods-action-mini-btn'; import GoodsActionIcon from './goods-action-icon';
import Icon from './icon'; import Icon from './icon';
import ImagePreview from './image-preview'; import ImagePreview from './image-preview';
import Info from './info'; import Info from './info';
@ -108,8 +108,8 @@ const components = [
Dialog, Dialog,
Field, Field,
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionButton,
GoodsActionMiniBtn, GoodsActionIcon,
Icon, Icon,
ImagePreview, ImagePreview,
Info, Info,
@ -193,8 +193,8 @@ export {
Dialog, Dialog,
Field, Field,
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionButton,
GoodsActionMiniBtn, GoodsActionIcon,
Icon, Icon,
ImagePreview, ImagePreview,
Info, Info,

4
types/index.d.ts vendored
View File

@ -35,8 +35,8 @@ export class CouponList extends VanComponent {}
export class DatetimePicker extends VanComponent {} export class DatetimePicker extends VanComponent {}
export class Field extends VanComponent {} export class Field extends VanComponent {}
export class GoodsAction extends VanComponent {} export class GoodsAction extends VanComponent {}
export class GoodsActionBigBtn extends VanComponent {} export class GoodsActionButton extends VanComponent {}
export class GoodsActionMiniBtn extends VanComponent {} export class GoodsActionIcon extends VanComponent {}
export class Icon extends VanComponent {} export class Icon extends VanComponent {}
export class List extends VanComponent {} export class List extends VanComponent {}
export class Loading extends VanComponent {} export class Loading extends VanComponent {}