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';
.van-goods-action-big-btn {
.van-goods-action-button {
flex: 1;
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 { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionBigBtnProps = RouteProps & {
export type GoodsActionButtonProps = RouteProps & {
text?: string;
primary?: boolean;
loading?: boolean;
disabled?: boolean;
};
const [sfc, bem] = use('goods-action-big-btn');
const [sfc, bem] = use('goods-action-button');
function GoodsActionBigBtn(
function GoodsActionButton(
h: CreateElement,
props: GoodsActionBigBtnProps,
props: GoodsActionButtonProps,
slots: DefaultSlots,
ctx: RenderContext<GoodsActionBigBtnProps>
ctx: RenderContext<GoodsActionButtonProps>
) {
const onClick = (event: Event) => {
emit(ctx, 'click', event);
@ -43,7 +43,7 @@ function GoodsActionBigBtn(
);
}
GoodsActionBigBtn.props = {
GoodsActionButton.props = {
...routeProps,
text: String,
primary: Boolean,
@ -51,4 +51,4 @@ GoodsActionBigBtn.props = {
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';
.van-goods-action-mini-btn {
.van-goods-action-icon {
color: @gray-darker;
display: flex;
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 { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionMiniBtnProps = RouteProps & {
export type GoodsActionIconProps = RouteProps & {
icon: string;
text?: string;
info?: string | number;
iconClass?: any;
};
const [sfc, bem] = use('goods-action-mini-btn');
const [sfc, bem] = use('goods-action-icon');
function GoodsActionMiniBtn(
function GoodsActionIcon(
h: CreateElement,
props: GoodsActionMiniBtnProps,
props: GoodsActionIconProps,
slots: DefaultSlots,
ctx: RenderContext<GoodsActionMiniBtnProps>
ctx: RenderContext<GoodsActionIconProps>
) {
const onClick = (event: Event) => {
emit(ctx, 'click', event);
@ -40,7 +40,7 @@ function GoodsActionMiniBtn(
);
}
GoodsActionMiniBtn.props = {
GoodsActionIcon.props = {
...routeProps,
text: String,
icon: String,
@ -48,4 +48,4 @@ GoodsActionMiniBtn.props = {
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-block :title="$t('basicUsage')">
<van-goods-action>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="chat-o"
:text="$t('icon1')"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="cart-o"
:text="$t('icon2')"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-big-btn
<van-goods-action-button
:text="$t('button1')"
@click="onClickBigBtn"
@click="onClickButton"
/>
<van-goods-action-big-btn
<van-goods-action-button
primary
:text="$t('button2')"
@click="onClickBigBtn"
@click="onClickButton"
/>
</van-goods-action>
</demo-block>
<demo-block :title="$t('title2')">
<van-goods-action>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="chat-o"
:text="$t('icon1')"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="cart-o"
info="5"
:text="$t('icon2')"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="shop-o"
:text="$t('icon3')"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-big-btn
<van-goods-action-button
:text="$t('button1')"
@click="onClickBigBtn"
@click="onClickButton"
/>
<van-goods-action-big-btn
<van-goods-action-button
primary
:text="$t('button2')"
@click="onClickBigBtn"
@click="onClickButton"
/>
</van-goods-action>
</demo-block>
@ -82,11 +82,11 @@ export default {
},
methods: {
onClickMiniBtn() {
onClickIcon() {
this.$toast(this.$t('clickIcon'));
},
onClickBigBtn() {
onClickButton() {
this.$toast(this.$t('clickButton'));
}
}

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

@ -4,14 +4,14 @@
``` javascript
import {
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn
GoodsActionButton,
GoodsActionIcon
} from 'vant';
Vue
.use(GoodsAction)
.use(GoodsActionBigBtn)
.use(GoodsActionMiniBtn);
.use(GoodsActionButton)
.use(GoodsActionIcon);
```
### Usage
@ -19,24 +19,24 @@ Vue
```html
<van-goods-action>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="chat-o"
text="Icon1"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="cart-o"
text="Icon2"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-big-btn
<van-goods-action-button
text="Button1"
@click="onClickBigBtn"
@click="onClickButton"
/>
<van-goods-action-big-btn
<van-goods-action-button
primary
text="Button2"
@click="onClickBigBtn"
@click="onClickButton"
/>
</van-goods-action>
```
@ -44,10 +44,10 @@ Vue
```javascript
export default {
methods: {
onClickMiniBtn() {
onClickIcon() {
Toast('Click Icon');
},
onClickBigBtn() {
onClickButton() {
Toast('Click Button');
}
}
@ -60,21 +60,21 @@ Use `info` prop to show messages in upper right corner of icon
```html
<van-goods-action>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="chat-o"
text="Icon1"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
info="5"
icon="cart-o"
text="Icon2"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="shop-o"
text="Icon3"
/>
<van-goods-action-big-btn text="Button1" />
<van-goods-action-big-btn
<van-goods-action-button text="Button1" />
<van-goods-action-button
primary
text="Button2"
/>
@ -88,7 +88,7 @@ Use `info` prop to show messages in upper right corner of icon
| 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` |
#### GoodsActionMiniBtn
#### GoodsActionIcon
| 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` | - |
| replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
#### GoodsActionBigBtn
#### GoodsActionButton
| 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 class="van-goods-action">
<div class="van-goods-action-mini-btn van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
<div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!---->
</div>客服
</div>
<div class="van-goods-action-mini-btn van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
<div class="van-goods-action-icon van-hairline">
<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-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 class="van-goods-action">
<div class="van-goods-action-mini-btn van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
<div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!---->
</div>客服
</div>
<div class="van-goods-action-mini-btn van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
<div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<div class="van-info">5</div>
</div>购物车
</div>
<div class="van-goods-action-mini-btn van-hairline">
<div class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon">
<div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
<!---->
</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>

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

@ -1,10 +1,10 @@
// 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`] = `
<div class="van-goods-action-mini-btn van-hairline">
<div class="van-icon van-icon-undefined van-goods-action-mini-btn__icon">
exports[`Icon render default slot 1`] = `
<div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-undefined van-goods-action-icon__icon">
<!---->
</div>Default Content
</div>

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

@ -1,10 +1,10 @@
import BigBtn from '../../goods-action-big-btn';
import MiniBtn from '../../goods-action-mini-btn';
import Button from '../../goods-action-button';
import Icon from '../../goods-action-icon';
import { mount } from '../../../test/utils';
test('BigBtn click event', () => {
test('Button click event', () => {
const click = jest.fn();
const wrapper = mount(BigBtn, {
const wrapper = mount(Button, {
context: {
on: {
click
@ -16,9 +16,9 @@ test('BigBtn click event', () => {
expect(click).toHaveBeenCalledTimes(1);
});
test('MiniBtn click event', () => {
test('Icon click event', () => {
const click = jest.fn();
const wrapper = mount(MiniBtn, {
const wrapper = mount(Icon, {
context: {
on: {
click
@ -30,20 +30,20 @@ test('MiniBtn click event', () => {
expect(click).toHaveBeenCalledTimes(1);
});
test('BigBtn render default slot', () => {
test('Button render default slot', () => {
const wrapper = mount({
render(h) {
return h(BigBtn, null, ['Default Content']);
return h(Button, null, ['Default Content']);
}
});
expect(wrapper).toMatchSnapshot();
});
test('Mini render default slot', () => {
test('Icon render default slot', () => {
const wrapper = mount({
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
import {
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn
GoodsActionIcon,
GoodsActionButton
} from 'vant';
Vue
.use(GoodsAction)
.use(GoodsActionBigBtn)
.use(GoodsActionMiniBtn);
.use(GoodsActionIcon)
.use(GoodsActionButton);
```
### 代码演示
@ -19,24 +19,24 @@ Vue
```html
<van-goods-action>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="chat-o"
text="客服"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="cart-o"
text="购物车"
@click="onClickMiniBtn"
@click="onClickIcon"
/>
<van-goods-action-big-btn
<van-goods-action-button
text="加入购物车"
@click="onClickBigBtn"
@click="onClickButton"
/>
<van-goods-action-big-btn
<van-goods-action-button
primary
text="立即购买"
@click="onClickBigBtn"
@click="onClickButton"
/>
</van-goods-action>
```
@ -44,10 +44,10 @@ Vue
```javascript
export default {
methods: {
onClickMiniBtn() {
onClickIcon() {
Toast('点击图标');
},
onClickBigBtn() {
onClickButton() {
Toast('点击按钮');
}
}
@ -59,21 +59,21 @@ export default {
```html
<van-goods-action>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="chat-o"
text="客服"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
info="5"
icon="cart-o"
text="购物车"
/>
<van-goods-action-mini-btn
<van-goods-action-icon
icon="shop-o"
text="店铺"
/>
<van-goods-action-big-btn text="加入购物车" />
<van-goods-action-big-btn
<van-goods-action-button text="加入购物车" />
<van-goods-action-button
primary
text="立即购买"
/>
@ -88,7 +88,7 @@ export default {
|------|------|------|------|------|
| 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` | - | - |
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
#### GoodsActionBigBtn
#### GoodsActionButton
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|

4
packages/index.less
View File

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

12
packages/index.ts
View File

@ -27,8 +27,8 @@ import DatetimePicker from './datetime-picker';
import Dialog from './dialog';
import Field from './field';
import GoodsAction from './goods-action';
import GoodsActionBigBtn from './goods-action-big-btn';
import GoodsActionMiniBtn from './goods-action-mini-btn';
import GoodsActionButton from './goods-action-button';
import GoodsActionIcon from './goods-action-icon';
import Icon from './icon';
import ImagePreview from './image-preview';
import Info from './info';
@ -108,8 +108,8 @@ const components = [
Dialog,
Field,
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn,
GoodsActionButton,
GoodsActionIcon,
Icon,
ImagePreview,
Info,
@ -193,8 +193,8 @@ export {
Dialog,
Field,
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn,
GoodsActionButton,
GoodsActionIcon,
Icon,
ImagePreview,
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 Field extends VanComponent {}
export class GoodsAction extends VanComponent {}
export class GoodsActionBigBtn extends VanComponent {}
export class GoodsActionMiniBtn extends VanComponent {}
export class GoodsActionButton extends VanComponent {}
export class GoodsActionIcon extends VanComponent {}
export class Icon extends VanComponent {}
export class List extends VanComponent {}
export class Loading extends VanComponent {}