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-list',
'coupon-cell', 'coupon-cell',
'submit-bar', 'submit-bar',
'goods-action', 'action-bar',
'goods-action-icon', 'action-bar-icon',
'goods-action-button', 'action-bar-button',
'address-edit', 'address-edit',
'form', '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: `active-id.sync` 重命名为 `v-model:active-id`
- TreeSelect: `main-active-index.sync` 重命名为 `v-model:main-active-index` - TreeSelect: `main-active-index.sync` 重命名为 `v-model:main-active-index`
##### 组件命名调整
- GoodsAction：重命名为 `ActionBar`
- GoodsActionIcon：重命名为 `ActionBarIcon`
- GoodsActionButton：重命名为 `ActionBarButton`
##### API 命名调整 ##### API 命名调整
以下改动是为了规范 API 命名： 以下改动是为了规范 API 命名：
@ -82,7 +88,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- TreeSelect: `navclick` 事件重命名为 `click-nav` - TreeSelect: `navclick` 事件重命名为 `click-nav`
- TreeSelect: `itemclick` 事件重命名为 `click-item` - TreeSelect: `itemclick` 事件重命名为 `click-item`
##### 重命名徽标属性 ##### 徽标属性命名调整
在之前的版本中，我们通过 info 属性来展示图标右上角的徽标信息，为了更符合社区的命名习惯，我们将这个属性重命名为 badge，影响以下组件： 在之前的版本中，我们通过 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 { ChildrenMixin } from '../mixins/relation';
import Button from '../button'; import Button from '../button';
const [createComponent, bem] = createNamespace('goods-action-button'); const [createComponent, bem] = createNamespace('action-bar-button');
export default createComponent({ export default createComponent({
mixins: [ChildrenMixin('vanGoodsAction')], mixins: [ChildrenMixin('vanActionBar')],
props: { props: {
...routeProps, ...routeProps,

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

@ -1,8 +1,8 @@
@import '../style/var'; @import '../style/var';
.van-goods-action-button { .van-action-bar-button {
flex: 1; flex: 1;
height: @goods-action-button-height; height: @action-bar-button-height;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @font-size-md; font-size: @font-size-md;
border: none; border: none;
@ -21,11 +21,11 @@
} }
&--warning { &--warning {
background: @goods-action-button-warning-color; background: @action-bar-button-warning-color;
} }
&--danger { &--danger {
background: @goods-action-button-danger-color; background: @action-bar-button-danger-color;
} }
@media (max-width: 321px) { @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 Info from '../info';
import Icon from '../icon'; import Icon from '../icon';
const [createComponent, bem] = createNamespace('goods-action-icon'); const [createComponent, bem] = createNamespace('action-bar-icon');
export default createComponent({ export default createComponent({
mixins: [ChildrenMixin('vanGoodsAction')], mixins: [ChildrenMixin('vanActionBar')],
props: { props: {
...routeProps, ...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 ### Install
```js ```js
import Vue from 'vue'; import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'; import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
Vue.use(GoodsAction); Vue.use(ActionBar);
Vue.use(GoodsActionButton); Vue.use(ActionBarButton);
Vue.use(GoodsActionIcon); Vue.use(ActionBarIcon);
``` ```
## Usage ## Usage
@ -16,12 +16,12 @@ Vue.use(GoodsActionIcon);
### Basic Usage ### Basic Usage
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" /> <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" /> <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
<van-goods-action-icon icon="shop-o" text="Icon3" @click="onClickIcon" /> <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
<van-goods-action-button type="danger" text="Button" @click="onClickButton" /> <van-action-bar-button type="danger" text="Button" @click="onClickButton" />
</van-goods-action> </van-action-bar>
``` ```
```js ```js
@ -44,47 +44,47 @@ export default {
Use `badge` prop to show badge in icon Use `badge` prop to show badge in icon
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="Icon1" dot /> <van-action-bar-icon icon="chat-o" text="Icon1" dot />
<van-goods-action-icon icon="cart-o" text="Icon2" badge="5" /> <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" badge="12" /> <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />
<van-goods-action-button type="warning" text="Button" /> <van-action-bar-button type="warning" text="Button" />
<van-goods-action-button type="danger" text="Button" /> <van-action-bar-button type="danger" text="Button" />
</van-goods-action> </van-action-bar>
``` ```
### Custom Icon Color ### Custom Icon Color
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" /> <van-action-bar-icon icon="chat-o" text="Icon1" color="#07c160" />
<van-goods-action-icon icon="cart-o" text="Icon2" /> <van-action-bar-icon icon="cart-o" text="Icon2" />
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" /> <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
<van-goods-action-button type="warning" text="Button" /> <van-action-bar-button type="warning" text="Button" />
<van-goods-action-button type="danger" text="Button" /> <van-action-bar-button type="danger" text="Button" />
</van-goods-action> </van-action-bar>
``` ```
### Custom Button Color ### Custom Button Color
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="Icon1" /> <van-action-bar-icon icon="chat-o" text="Icon1" />
<van-goods-action-icon icon="shop-o" text="Icon2" /> <van-action-bar-icon icon="shop-o" text="Icon2" />
<van-goods-action-button color="#be99ff" type="warning" text="Button" /> <van-action-bar-button color="#be99ff" type="warning" text="Button" />
<van-goods-action-button color="#7232dd" type="danger" text="Button" /> <van-action-bar-button color="#7232dd" type="danger" text="Button" />
</van-goods-action> </van-action-bar>
``` ```
## API ## API
### GoodsAction Props ### ActionBar Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
### GoodsActionIcon Props ### ActionBarIcon Props
| Attribute | Description | Type | Default | | 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_ | - | | 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` |
### GoodsActionButton Props ### ActionBarButton Props
| Attribute | Description | Type | Default | | 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_ | - | | 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` |
### GoodsActionIcon Slots ### ActionBarIcon Slots
| Name | Description | | Name | Description |
| ------- | ----------- | | ------- | ----------- |
| default | Text | | default | Text |
| icon | Custom icon | | icon | Custom icon |
### GoodsActionButton Slots ### ActionBarButton Slots
| Name | Description | | 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 ```js
import Vue from 'vue'; import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'; import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
Vue.use(GoodsAction); Vue.use(ActionBar);
Vue.use(GoodsActionButton); Vue.use(ActionBarButton);
Vue.use(GoodsActionIcon); Vue.use(ActionBarIcon);
``` ```
## 代码演示 ## 代码演示
@ -16,16 +16,12 @@ Vue.use(GoodsActionIcon);
### 基础用法 ### 基础用法
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" /> <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" /> <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" /> <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
<van-goods-action-button <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
type="danger" </van-action-bar>
text="立即购买"
@click="onClickButton"
/>
</van-goods-action>
``` ```
```js ```js
@ -45,54 +41,54 @@ export default {
### 徽标提示 ### 徽标提示
在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="客服" dot /> <van-action-bar-icon icon="chat-o" text="客服" dot />
<van-goods-action-icon icon="cart-o" text="购物车" badge="5" /> <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
<van-goods-action-icon icon="shop-o" text="店铺" badge="12" /> <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
<van-goods-action-button type="warning" text="加入购物车" /> <van-action-bar-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" /> <van-action-bar-button type="danger" text="立即购买" />
</van-goods-action> </van-action-bar>
``` ```
### 自定义图标颜色 ### 自定义图标颜色
通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色 通过 ActionBarIcon 的`color`属性可以自定义图标的颜色
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" /> <van-action-bar-icon icon="chat-o" text="客服" color="#07c160" />
<van-goods-action-icon icon="cart-o" text="购物车" /> <van-action-bar-icon icon="cart-o" text="购物车" />
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" /> <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
<van-goods-action-button type="warning" text="加入购物车" /> <van-action-bar-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" /> <van-action-bar-button type="danger" text="立即购买" />
</van-goods-action> </van-action-bar>
``` ```
### 自定义按钮颜色 ### 自定义按钮颜色
通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色 通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
```html ```html
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" text="客服" /> <van-action-bar-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="shop-o" text="店铺" /> <van-action-bar-icon icon="shop-o" text="店铺" />
<van-goods-action-button color="#be99ff" type="warning" text="加入购物车" /> <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" />
<van-goods-action-button color="#7232dd" type="danger" text="立即购买" /> <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
</van-goods-action> </van-action-bar>
``` ```
## API ## API
### GoodsAction Props ### ActionBar Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | | 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_ | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | | 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_ | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionIcon Slots ### ActionBarIcon Slots
| 名称 | 说明 | | 名称 | 说明 |
| ------- | ---------- | | ------- | ---------- |
| default | 文本内容 | | default | 文本内容 |
| icon | 自定义图标 | | 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> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-goods-action> <van-action-bar>
<van-goods-action-icon <van-action-bar-icon
icon="chat-o" icon="chat-o"
:text="t('icon1')" :text="t('icon1')"
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-icon <van-action-bar-icon
icon="cart-o" icon="cart-o"
:text="t('icon2')" :text="t('icon2')"
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-icon <van-action-bar-icon
icon="shop-o" icon="shop-o"
:text="t('icon3')" :text="t('icon3')"
@click="onClickIcon" @click="onClickIcon"
/> />
<van-goods-action-button <van-action-bar-button
type="danger" type="danger"
:text="t('button2')" :text="t('button2')"
@click="onClickButton" @click="onClickButton"
/> />
</van-goods-action> </van-action-bar>
</demo-block> </demo-block>
<demo-block :title="t('iconBadge')"> <demo-block :title="t('iconBadge')">
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" dot :text="t('icon1')" /> <van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
<van-goods-action-icon icon="cart-o" badge="5" :text="t('icon2')" /> <van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
<van-goods-action-icon icon="shop-o" badge="12" :text="t('icon3')" /> <van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
<van-goods-action-button type="warning" :text="t('button1')" /> <van-action-bar-button type="warning" :text="t('button1')" />
<van-goods-action-button type="danger" :text="t('button2')" /> <van-action-bar-button type="danger" :text="t('button2')" />
</van-goods-action> </van-action-bar>
</demo-block> </demo-block>
<demo-block v-if="!isWeapp" :title="t('customIconColor')"> <demo-block v-if="!isWeapp" :title="t('customIconColor')">
<van-goods-action> <van-action-bar>
<van-goods-action-icon <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
icon="chat-o" <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
:text="t('icon1')" <van-action-bar-icon
color="#07c160"
/>
<van-goods-action-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-icon
icon="star" icon="star"
:text="t('collected')" :text="t('collected')"
color="#ff5000" color="#ff5000"
/> />
<van-goods-action-button type="warning" :text="t('button1')" /> <van-action-bar-button type="warning" :text="t('button1')" />
<van-goods-action-button type="danger" :text="t('button2')" /> <van-action-bar-button type="danger" :text="t('button2')" />
</van-goods-action> </van-action-bar>
</demo-block> </demo-block>
<demo-block :title="t('customButtonColor')"> <demo-block :title="t('customButtonColor')">
<van-goods-action> <van-action-bar>
<van-goods-action-icon icon="chat-o" :text="t('icon1')" /> <van-action-bar-icon icon="chat-o" :text="t('icon1')" />
<van-goods-action-icon icon="cart-o" :text="t('icon2')" /> <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-goods-action-button <van-action-bar-button
color="#be99ff" color="#be99ff"
type="warning" type="warning"
:text="t('button1')" :text="t('button1')"
/> />
<van-goods-action-button <van-action-bar-button
color="#7232dd" color="#7232dd"
type="danger" type="danger"
:text="t('button2')" :text="t('button2')"
/> />
</van-goods-action> </van-action-bar>
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -114,8 +110,8 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.demo-goods-action { .demo-action-bar {
.van-goods-action { .van-action-bar {
position: relative; position: relative;
padding-bottom: 0; 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 { createNamespace } from '../utils';
import { ParentMixin } from '../mixins/relation'; import { ParentMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('goods-action'); const [createComponent, bem] = createNamespace('action-bar');
export default createComponent({ export default createComponent({
mixins: [ParentMixin('vanGoodsAction')], mixins: [ParentMixin('vanActionBar')],
props: { props: {
safeAreaInsetBottom: { safeAreaInsetBottom: {

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

@ -1,6 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-goods-action { .van-action-bar {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -8,10 +8,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: content-box; box-sizing: content-box;
height: @goods-action-height; height: @action-bar-height;
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
background-color: @goods-action-background-color; background-color: @action-bar-background-color;
&--unfit { &--unfit {
padding-bottom: 0; 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 ActionBar from '..';
import Button from '../../goods-action-button'; import Button from '../../action-bar-button';
import Icon from '../../goods-action-icon'; import Icon from '../../action-bar-icon';
import { mount } from '../../../test'; import { mount } from '../../../test';
test('Button click event', () => { test('Button click event', () => {
@ -87,7 +87,7 @@ test('Icon render icon slot with dot', () => {
}); });
test('disable safe-area-inset-bottom prop', () => { test('disable safe-area-inset-bottom prop', () => {
const wrapper = mount(GoodsAction, { const wrapper = mount(ActionBar, {
propsData: { propsData: {
safeAreaInsetBottom: false, 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 { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
import Popup from '../popup'; import Popup from '../popup';
import Button from '../button'; import Button from '../button';
import GoodsAction from '../goods-action'; import ActionBar from '../action-bar';
import GoodsActionButton from '../goods-action-button'; import ActionBarButton from '../action-bar-button';
const [createComponent, bem, t] = createNamespace('dialog'); const [createComponent, bem, t] = createNamespace('dialog');
@ -107,9 +107,9 @@ export default createComponent({
genRoundButtons() { genRoundButtons() {
return ( return (
<GoodsAction class={bem('footer')}> <ActionBar class={bem('footer')}>
{this.showCancelButton && ( {this.showCancelButton && (
<GoodsActionButton <ActionBarButton
size="large" size="large"
type="warning" type="warning"
text={this.cancelButtonText || t('cancel')} text={this.cancelButtonText || t('cancel')}
@ -122,7 +122,7 @@ export default createComponent({
/> />
)} )}
{this.showConfirmButton && ( {this.showConfirmButton && (
<GoodsActionButton <ActionBarButton
size="large" size="large"
type="danger" type="danger"
text={this.confirmButtonText || t('confirm')} 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-color: @gray-7;
@grid-item-text-font-size: @font-size-sm; @grid-item-text-font-size: @font-size-sm;
// GoodsAction // ActionBar
@goods-action-background-color: @white; @action-bar-background-color: @white;
@goods-action-height: 50px; @action-bar-height: 50px;
@goods-action-icon-width: 48px; @action-bar-icon-width: 48px;
@goods-action-icon-height: 100%; @action-bar-icon-height: 100%;
@goods-action-icon-color: @text-color; @action-bar-icon-color: @text-color;
@goods-action-icon-size: 18px; @action-bar-icon-size: 18px;
@goods-action-icon-font-size: @font-size-xs; @action-bar-icon-font-size: @font-size-xs;
@goods-action-icon-active-color: @active-color; @action-bar-icon-active-color: @active-color;
@goods-action-icon-text-color: @gray-7; @action-bar-icon-text-color: @gray-7;
@goods-action-button-height: 40px; @action-bar-button-height: 40px;
@goods-action-button-warning-color: @gradient-orange; @action-bar-button-warning-color: @gradient-orange;
@goods-action-button-danger-color: @gradient-red; @action-bar-button-danger-color: @gradient-red;
// IndexAnchor // IndexAnchor
@index-anchor-z-index: 1; @index-anchor-z-index: 1;

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

@ -72,7 +72,7 @@
border: none; border: none;
&--danger { &--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: '导航组件', title: '导航组件',
items: [ items: [
{
path: 'action-bar',
title: 'ActionBar 动作栏',
},
{ {
path: 'grid', path: 'grid',
title: 'Grid 宫格', title: 'Grid 宫格',
@ -347,10 +351,6 @@ module.exports = {
path: 'coupon-list', path: 'coupon-list',
title: 'Coupon 优惠券', title: 'Coupon 优惠券',
}, },
{
path: 'goods-action',
title: 'GoodsAction 商品导航',
},
{ {
path: 'submit-bar', path: 'submit-bar',
title: 'SubmitBar 提交订单栏', title: 'SubmitBar 提交订单栏',
@ -620,6 +620,10 @@ module.exports = {
{ {
title: 'Navigation Components', title: 'Navigation Components',
items: [ items: [
{
path: 'action-bar',
title: 'ActionBar',
},
{ {
path: 'grid', path: 'grid',
title: 'Grid', title: 'Grid',
@ -681,10 +685,6 @@ module.exports = {
path: 'coupon-list', path: 'coupon-list',
title: 'Coupon', title: 'Coupon',
}, },
{
path: 'goods-action',
title: 'GoodsAction',
},
{ {
path: 'submit-bar', path: 'submit-bar',
title: 'SubmitBar', title: 'SubmitBar',