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: rename GoodsAction to ActionBar

Browse Source
This commit is contained in:
chenjiahan 2020-08-20 11:54:04 +08:00
parent 1ad76a8aa3
commit fc825d7a33
22 changed files with 315 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components.js
View File

@ -77,9 +77,9 @@ module.exports = [
'coupon-list',
'coupon-cell',
'submit-bar',
'goods-action',
'goods-action-icon',
'goods-action-button',
'action-bar',
'action-bar-icon',
'action-bar-button',
'address-edit',
'form',
];

8
docs/markdown/changelog-v3.zh-CN.md
View File

@ -72,6 +72,12 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- TreeSelect: `active-id.sync` 重命名为 `v-model:active-id`
- TreeSelect: `main-active-index.sync` 重命名为 `v-model:main-active-index`
##### 组件命名调整
- GoodsAction：重命名为 `ActionBar`
- GoodsActionIcon：重命名为 `ActionBarIcon`
- GoodsActionButton：重命名为 `ActionBarButton`
##### API 命名调整
以下改动是为了规范 API 命名：
@ -82,7 +88,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- TreeSelect: `navclick` 事件重命名为 `click-nav`
- TreeSelect: `itemclick` 事件重命名为 `click-item`
##### 重命名徽标属性
##### 徽标属性命名调整
在之前的版本中，我们通过 info 属性来展示图标右上角的徽标信息，为了更符合社区的命名习惯，我们将这个属性重命名为 badge，影响以下组件：

4
src/goods-action-button/index.js → src/action-bar-button/index.js
View File

@ -3,10 +3,10 @@ import { route, routeProps } from '../utils/router';
import { ChildrenMixin } from '../mixins/relation';
import Button from '../button';
const [createComponent, bem] = createNamespace('goods-action-button');
const [createComponent, bem] = createNamespace('action-bar-button');
export default createComponent({
mixins: [ChildrenMixin('vanGoodsAction')],
mixins: [ChildrenMixin('vanActionBar')],
props: {
...routeProps,

8
src/goods-action-button/index.less → src/action-bar-button/index.less
View File

@ -1,8 +1,8 @@
@import '../style/var';
.van-goods-action-button {
.van-action-bar-button {
flex: 1;
height: @goods-action-button-height;
height: @action-bar-button-height;
font-weight: @font-weight-bold;
font-size: @font-size-md;
border: none;
@ -21,11 +21,11 @@
}
&--warning {
background: @goods-action-button-warning-color;
background: @action-bar-button-warning-color;
}
&--danger {
background: @goods-action-button-danger-color;
background: @action-bar-button-danger-color;
}
@media (max-width: 321px) {

4
src/goods-action-icon/index.js → src/action-bar-icon/index.js
View File

@ -4,10 +4,10 @@ import { ChildrenMixin } from '../mixins/relation';
import Info from '../info';
import Icon from '../icon';
const [createComponent, bem] = createNamespace('goods-action-icon');
const [createComponent, bem] = createNamespace('action-bar-icon');
export default createComponent({
mixins: [ChildrenMixin('vanGoodsAction')],
mixins: [ChildrenMixin('vanActionBar')],
props: {
...routeProps,

27
src/action-bar-icon/index.less Normal file
View File

@ -0,0 +1,27 @@
@import '../style/var';
.van-action-bar-icon {
display: flex;
flex-direction: column;
justify-content: center;
min-width: @action-bar-icon-width;
height: @action-bar-icon-height;
color: @action-bar-icon-text-color;
font-size: @action-bar-icon-font-size;
line-height: 1;
text-align: center;
background-color: @white;
cursor: pointer;
&:active {
background-color: @action-bar-icon-active-color;
}
&__icon {
position: relative;
width: 1em;
margin: 0 auto 5px;
color: @action-bar-icon-color;
font-size: @action-bar-icon-size;
}
}

72
src/goods-action/README.md → src/action-bar/README.md
View File

@ -1,14 +1,14 @@
# GoodsAction
# ActionBar
### Install
```js
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(ActionBar);
Vue.use(ActionBarButton);
Vue.use(ActionBarIcon);
```
## Usage
@ -16,12 +16,12 @@ Vue.use(GoodsActionIcon);
### Basic Usage
```html
<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-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
<van-goods-action-button type="danger" text="Button" @click="onClickButton" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
<van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
<van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
<van-action-bar-button type="danger" text="Button" @click="onClickButton" />
</van-action-bar>
```
```js
@ -44,47 +44,47 @@ export default {
Use `badge` prop to show badge in icon
```html
<van-goods-action>
<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="Button" />
<van-goods-action-button type="danger" text="Button" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="Icon1" dot />
<van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />
<van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />
<van-action-bar-button type="warning" text="Button" />
<van-action-bar-button type="danger" text="Button" />
</van-action-bar>
```
### Custom Icon Color
```html
<van-goods-action>
<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="Button" />
<van-goods-action-button type="danger" text="Button" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="Icon1" color="#07c160" />
<van-action-bar-icon icon="cart-o" text="Icon2" />
<van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
<van-action-bar-button type="warning" text="Button" />
<van-action-bar-button type="danger" text="Button" />
</van-action-bar>
```
### Custom Button Color
```html
<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="Button" />
<van-goods-action-button color="#7232dd" type="danger" text="Button" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="Icon1" />
<van-action-bar-icon icon="shop-o" text="Icon2" />
<van-action-bar-button color="#be99ff" type="warning" text="Button" />
<van-action-bar-button color="#7232dd" type="danger" text="Button" />
</van-action-bar>
```
## API
### GoodsAction Props
### ActionBar Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
### GoodsActionIcon Props
### ActionBarIcon Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
@ -98,7 +98,7 @@ Use `badge` prop to show badge in 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` |
### GoodsActionButton Props
### ActionBarButton Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
@ -113,14 +113,14 @@ Use `badge` prop to show badge in 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` |
### GoodsActionIcon Slots
### ActionBarIcon Slots
| Name | Description |
| ------- | ----------- |
| default | Text |
| icon | Custom icon |
### GoodsActionButton Slots
### ActionBarButton Slots
| Name | Description |
| ------- | -------------- |

82
src/goods-action/README.zh-CN.md → src/action-bar/README.zh-CN.md
View File

@ -1,14 +1,14 @@
# GoodsAction 商品导航
# ActionBar 动作栏
### 引入
```js
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(ActionBar);
Vue.use(ActionBarButton);
Vue.use(ActionBarIcon);
```
## 代码演示
@ -16,16 +16,12 @@ Vue.use(GoodsActionIcon);
### 基础用法
```html
<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-icon icon="shop-o" text="店铺" @click="onClickIcon" />
<van-goods-action-button
type="danger"
text="立即购买"
@click="onClickButton"
/>
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
<van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
</van-action-bar>
```
```js
@ -45,54 +41,54 @@ export default {
### 徽标提示
在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" dot />
<van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
<van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
<van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" dot />
<van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
<van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
<van-action-bar-button type="warning" text="加入购物车" />
<van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
```
### 自定义图标颜色
通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色
通过 ActionBarIcon 的`color`属性可以自定义图标的颜色
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
<van-goods-action-icon icon="cart-o" text="购物车" />
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
<van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" color="#07c160" />
<van-action-bar-icon icon="cart-o" text="购物车" />
<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
<van-action-bar-button type="warning" text="加入购物车" />
<van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
```
### 自定义按钮颜色
通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
<van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" />
<van-action-bar-icon icon="shop-o" text="店铺" />
<van-action-bar-button color="#be99ff" type="warning" text="加入购物车" />
<van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
</van-action-bar>
```
## API
### GoodsAction Props
### ActionBar Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
### GoodsActionIcon Props
### ActionBarIcon Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
@ -107,7 +103,7 @@ export default {
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionButton Props
### ActionBarButton Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
@ -121,14 +117,14 @@ export default {
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionIcon Slots
### ActionBarIcon Slots
| 名称 | 说明 |
| ------- | ---------- |
| default | 文本内容 |
| icon | 自定义图标 |
### GoodsActionButton Slots
### ActionBarButton Slots
| 名称 | 说明 |
| ------- | ------------ |

60
src/goods-action/demo/index.vue → src/action-bar/demo/index.vue
View File

@ -1,73 +1,69 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-goods-action>
<van-goods-action-icon
<van-action-bar>
<van-action-bar-icon
icon="chat-o"
:text="t('icon1')"
@click="onClickIcon"
/>
<van-goods-action-icon
<van-action-bar-icon
icon="cart-o"
:text="t('icon2')"
@click="onClickIcon"
/>
<van-goods-action-icon
<van-action-bar-icon
icon="shop-o"
:text="t('icon3')"
@click="onClickIcon"
/>
<van-goods-action-button
<van-action-bar-button
type="danger"
:text="t('button2')"
@click="onClickButton"
/>
</van-goods-action>
</van-action-bar>
</demo-block>
<demo-block :title="t('iconBadge')">
<van-goods-action>
<van-goods-action-icon icon="chat-o" dot :text="t('icon1')" />
<van-goods-action-icon icon="cart-o" badge="5" :text="t('icon2')" />
<van-goods-action-icon icon="shop-o" badge="12" :text="t('icon3')" />
<van-goods-action-button type="warning" :text="t('button1')" />
<van-goods-action-button type="danger" :text="t('button2')" />
</van-goods-action>
<van-action-bar>
<van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
<van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
<van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
<van-action-bar-button type="warning" :text="t('button1')" />
<van-action-bar-button type="danger" :text="t('button2')" />
</van-action-bar>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('customIconColor')">
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
:text="t('icon1')"
color="#07c160"
/>
<van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-icon
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-icon
icon="star"
:text="t('collected')"
color="#ff5000"
/>
<van-goods-action-button type="warning" :text="t('button1')" />
<van-goods-action-button type="danger" :text="t('button2')" />
</van-goods-action>
<van-action-bar-button type="warning" :text="t('button1')" />
<van-action-bar-button type="danger" :text="t('button2')" />
</van-action-bar>
</demo-block>
<demo-block :title="t('customButtonColor')">
<van-goods-action>
<van-goods-action-icon icon="chat-o" :text="t('icon1')" />
<van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-button
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-button
color="#be99ff"
type="warning"
:text="t('button1')"
/>
<van-goods-action-button
<van-action-bar-button
color="#7232dd"
type="danger"
:text="t('button2')"
/>
</van-goods-action>
</van-action-bar>
</demo-block>
</demo-section>
</template>
@ -114,8 +110,8 @@ export default {
</script>
<style lang="less">
.demo-goods-action {
.van-goods-action {
.demo-action-bar {
.van-action-bar {
position: relative;
padding-bottom: 0;
}

4
src/goods-action/index.js → src/action-bar/index.js
View File

@ -1,10 +1,10 @@
import { createNamespace } from '../utils';
import { ParentMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('goods-action');
const [createComponent, bem] = createNamespace('action-bar');
export default createComponent({
mixins: [ParentMixin('vanGoodsAction')],
mixins: [ParentMixin('vanActionBar')],
props: {
safeAreaInsetBottom: {

6
src/goods-action/index.less → src/action-bar/index.less
View File

@ -1,6 +1,6 @@
@import '../style/var';
.van-goods-action {
.van-action-bar {
position: fixed;
right: 0;
bottom: 0;
@ -8,10 +8,10 @@
display: flex;
align-items: center;
box-sizing: content-box;
height: @goods-action-height;
height: @action-bar-height;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @goods-action-background-color;
background-color: @action-bar-background-color;
&--unfit {
padding-bottom: 0;

91
src/action-bar/test/__snapshots__/demo.spec.js.snap Normal file
View File

@ -0,0 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-action-bar">
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
<!---->
</div>购物车
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
<!---->
</div>店铺
</div> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last van-action-bar-button--danger">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
<div>
<div class="van-action-bar">
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
<div class="van-info van-info--dot"></div>
</div>客服
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
<div class="van-info">5</div>
</div>购物车
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
<div class="van-info">12</div>
</div>店铺
</div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-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-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
<div>
<div class="van-action-bar">
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-chat-o van-action-bar-icon__icon" style="color: rgb(7, 193, 96);">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
<!---->
</div>购物车
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-star van-action-bar-icon__icon" style="color: rgb(255, 80, 0);">
<!---->
</div>已收藏
</div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-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-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
<div>
<div class="van-action-bar">
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
<!---->
</div>购物车
</div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
<div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
</button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
</div>
`;

39
src/action-bar/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button render default slot 1`] = `
<button class="van-button van-button--default van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last">
<div class="van-button__content"><span class="van-button__text">Default Content</span></div>
</button>
`;
exports[`Icon render default slot 1`] = `
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-icon van-icon-undefined van-action-bar-icon__icon">
<!---->
</div>Default Content
</div>
`;
exports[`Icon render icon slot 1`] = `
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-action-bar-icon__icon">Custom Icon
<!---->
</div>Text
</div>
`;
exports[`Icon render icon slot with dot 1`] = `
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-action-bar-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
</div>Text
</div>
`;
exports[`Icon render icon slot with info 1`] = `
<div role="button" tabindex="0" class="van-action-bar-icon">
<div class="van-action-bar-icon__icon">Custom Icon<div class="van-info">1</div>
</div>Text
</div>
`;
exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-action-bar van-action-bar--unfit"></div>`;

0
src/goods-action/test/demo.spec.js → src/action-bar/test/demo.spec.js
View File

8
src/goods-action/test/index.spec.js → src/action-bar/test/index.spec.js
View File

@ -1,6 +1,6 @@
import GoodsAction from '..';
import Button from '../../goods-action-button';
import Icon from '../../goods-action-icon';
import ActionBar from '..';
import Button from '../../action-bar-button';
import Icon from '../../action-bar-icon';
import { mount } from '../../../test';
test('Button click event', () => {
@ -87,7 +87,7 @@ test('Icon render icon slot with dot', () => {
});
test('disable safe-area-inset-bottom prop', () => {
const wrapper = mount(GoodsAction, {
const wrapper = mount(ActionBar, {
propsData: {
safeAreaInsetBottom: false,
},

12
src/dialog/Dialog.js
View File

@ -2,8 +2,8 @@ import { createNamespace, addUnit } from '../utils';
import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
import Popup from '../popup';
import Button from '../button';
import GoodsAction from '../goods-action';
import GoodsActionButton from '../goods-action-button';
import ActionBar from '../action-bar';
import ActionBarButton from '../action-bar-button';
const [createComponent, bem, t] = createNamespace('dialog');
@ -107,9 +107,9 @@ export default createComponent({
genRoundButtons() {
return (
<GoodsAction class={bem('footer')}>
<ActionBar class={bem('footer')}>
{this.showCancelButton && (
<GoodsActionButton
<ActionBarButton
size="large"
type="warning"
text={this.cancelButtonText || t('cancel')}
@ -122,7 +122,7 @@ export default createComponent({
/>
)}
{this.showConfirmButton && (
<GoodsActionButton
<ActionBarButton
size="large"
type="danger"
text={this.confirmButtonText || t('confirm')}
@ -134,7 +134,7 @@ export default createComponent({
}}
/>
)}
</GoodsAction>
</ActionBar>
);
},

27
src/goods-action-icon/index.less
View File

@ -1,27 +0,0 @@
@import '../style/var';
.van-goods-action-icon {
display: flex;
flex-direction: column;
justify-content: center;
min-width: @goods-action-icon-width;
height: @goods-action-icon-height;
color: @goods-action-icon-text-color;
font-size: @goods-action-icon-font-size;
line-height: 1;
text-align: center;
background-color: @white;
cursor: pointer;
&:active {
background-color: @goods-action-icon-active-color;
}
&__icon {
position: relative;
width: 1em;
margin: 0 auto 5px;
color: @goods-action-icon-color;
font-size: @goods-action-icon-size;
}
}

91
src/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -1,91 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!---->
</div>购物车
</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-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>
</div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<div class="van-info van-info--dot"></div>
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<div class="van-info">5</div>
</div>购物车
</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 class="van-info">12</div>
</div>店铺
</div> <button class="van-button van-button--warning van-button--large 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-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!---->
</div>购物车
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
<!---->
</div>已收藏
</div> <button class="van-button van-button--warning van-button--large 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-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon">
<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-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
<div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
</button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>
</div>
</div>
`;

39
src/goods-action/test/__snapshots__/index.spec.js.snap
View File

@ -1,39 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button render default slot 1`] = `
<button class="van-button van-button--default van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last">
<div class="van-button__content"><span class="van-button__text">Default Content</span></div>
</button>
`;
exports[`Icon render default slot 1`] = `
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-undefined van-goods-action-icon__icon">
<!---->
</div>Default Content
</div>
`;
exports[`Icon render icon slot 1`] = `
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-goods-action-icon__icon">Custom Icon
<!---->
</div>Text
</div>
`;
exports[`Icon render icon slot with dot 1`] = `
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-goods-action-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
</div>Text
</div>
`;
exports[`Icon render icon slot with info 1`] = `
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-goods-action-icon__icon">Custom Icon<div class="van-info">1</div>
</div>Text
</div>
`;
exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-goods-action van-goods-action--unfit"></div>`;

26
src/style/var.less
View File

@ -378,19 +378,19 @@
@grid-item-text-color: @gray-7;
@grid-item-text-font-size: @font-size-sm;
// GoodsAction
@goods-action-background-color: @white;
@goods-action-height: 50px;
@goods-action-icon-width: 48px;
@goods-action-icon-height: 100%;
@goods-action-icon-color: @text-color;
@goods-action-icon-size: 18px;
@goods-action-icon-font-size: @font-size-xs;
@goods-action-icon-active-color: @active-color;
@goods-action-icon-text-color: @gray-7;
@goods-action-button-height: 40px;
@goods-action-button-warning-color: @gradient-orange;
@goods-action-button-danger-color: @gradient-red;
// ActionBar
@action-bar-background-color: @white;
@action-bar-height: 50px;
@action-bar-icon-width: 48px;
@action-bar-icon-height: 100%;
@action-bar-icon-color: @text-color;
@action-bar-icon-size: 18px;
@action-bar-icon-font-size: @font-size-xs;
@action-bar-icon-active-color: @active-color;
@action-bar-icon-text-color: @gray-7;
@action-bar-button-height: 40px;
@action-bar-button-warning-color: @gradient-orange;
@action-bar-button-danger-color: @gradient-red;
// IndexAnchor
@index-anchor-z-index: 1;

2
src/submit-bar/index.less
View File

@ -72,7 +72,7 @@
border: none;
&--danger {
background: @goods-action-button-danger-color;
background: @action-bar-button-danger-color;
}
}

16
vant.config.js
View File

@ -286,6 +286,10 @@ module.exports = {
{
title: '导航组件',
items: [
{
path: 'action-bar',
title: 'ActionBar 动作栏',
},
{
path: 'grid',
title: 'Grid 宫格',
@ -347,10 +351,6 @@ module.exports = {
path: 'coupon-list',
title: 'Coupon 优惠券',
},
{
path: 'goods-action',
title: 'GoodsAction 商品导航',
},
{
path: 'submit-bar',
title: 'SubmitBar 提交订单栏',
@ -620,6 +620,10 @@ module.exports = {
{
title: 'Navigation Components',
items: [
{
path: 'action-bar',
title: 'ActionBar',
},
{
path: 'grid',
title: 'Grid',
@ -681,10 +685,6 @@ module.exports = {
path: 'coupon-list',
title: 'Coupon',
},
{
path: 'goods-action',
title: 'GoodsAction',
},
{
path: 'submit-bar',
title: 'SubmitBar',