[breaking change] GoodsAction: rename component
This commit is contained in:
陈嘉涵
@@ -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'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 |
|
||||
|------|------|------|------|
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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']);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
|
||||
Reference in New Issue
Block a user