diff --git a/components.js b/components.js index 55da3420b..6b040c175 100644 --- a/components.js +++ b/components.js @@ -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', ]; diff --git a/docs/markdown/changelog-v3.zh-CN.md b/docs/markdown/changelog-v3.zh-CN.md index d151dda9b..0015ee053 100644 --- a/docs/markdown/changelog-v3.zh-CN.md +++ b/docs/markdown/changelog-v3.zh-CN.md @@ -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，影响以下组件： diff --git a/src/goods-action-button/index.js b/src/action-bar-button/index.js similarity index 91% rename from src/goods-action-button/index.js rename to src/action-bar-button/index.js index fbb3d63d6..77d819131 100644 --- a/src/goods-action-button/index.js +++ b/src/action-bar-button/index.js @@ -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, diff --git a/src/goods-action-button/index.less b/src/action-bar-button/index.less similarity index 75% rename from src/goods-action-button/index.less rename to src/action-bar-button/index.less index 28a2dba31..32bb62f38 100644 --- a/src/goods-action-button/index.less +++ b/src/action-bar-button/index.less @@ -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) { diff --git a/src/goods-action-icon/index.js b/src/action-bar-icon/index.js similarity index 91% rename from src/goods-action-icon/index.js rename to src/action-bar-icon/index.js index dff2835e0..7964f429d 100644 --- a/src/goods-action-icon/index.js +++ b/src/action-bar-icon/index.js @@ -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, diff --git a/src/action-bar-icon/index.less b/src/action-bar-icon/index.less new file mode 100644 index 000000000..0cb001cc6 --- /dev/null +++ b/src/action-bar-icon/index.less @@ -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; + } +} diff --git a/src/goods-action/README.md b/src/action-bar/README.md similarity index 56% rename from src/goods-action/README.md rename to src/action-bar/README.md index fe3c623cf..38fd7db4b 100644 --- a/src/goods-action/README.md +++ b/src/action-bar/README.md @@ -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 - - - - - - + + + + + + ``` ```js @@ -44,47 +44,47 @@ export default { Use `badge` prop to show badge in icon ```html - - - - - - - + + + + + + + ``` ### Custom Icon Color ```html - - - - - - - + + + + + + + ``` ### Custom Button Color ```html - - - - - - + + + + + + ``` ## 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 | | ------- | -------------- | diff --git a/src/goods-action/README.zh-CN.md b/src/action-bar/README.zh-CN.md similarity index 53% rename from src/goods-action/README.zh-CN.md rename to src/action-bar/README.zh-CN.md index 5740dc931..6828f658f 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/action-bar/README.zh-CN.md @@ -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 - - - - - - + + + + + + ``` ```js @@ -45,54 +41,54 @@ export default { ### 徽标提示 -在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 +在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标 ```html - - - - - - - + + + + + + + ``` ### 自定义图标颜色 -通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色 +通过 ActionBarIcon 的`color`属性可以自定义图标的颜色 ```html - - - - - - - + + + + + + + ``` ### 自定义按钮颜色 -通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色 +通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色 ```html - - - - - - + + + + + + ``` ## 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 | 名称 | 说明 | | ------- | ------------ | diff --git a/src/goods-action/demo/index.vue b/src/action-bar/demo/index.vue similarity index 60% rename from src/goods-action/demo/index.vue rename to src/action-bar/demo/index.vue index 85ff7f0cc..96cd4ab28 100644 --- a/src/goods-action/demo/index.vue +++ b/src/action-bar/demo/index.vue @@ -1,73 +1,69 @@ @@ -114,8 +110,8 @@ export default {