alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages 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
Download Patch File Download Diff File Expand all files Collapse all files
src/action-bar/README.md
+127
View File
@@ -0,0 +1,127 @@
# ActionBar
### Install
```js
import Vue from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
Vue.use(ActionBar);
Vue.use(ActionBarButton);
Vue.use(ActionBarIcon);
```
## Usage
### Basic Usage
```html
<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
import { Toast } from 'vant';
export default {
methods: {
onClickIcon() {
Toast('Click Icon');
},
onClickButton() {
Toast('Click Button');
},
},
};
```
### Icon Badge
Use `badge` prop to show badge in icon
```html
<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-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-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
### ActionBar Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
### ActionBarIcon Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| text | Button text | _string_ | - |
| icon | Icon | _string_ | - |
| color `v2.4.2` | Icon color | _string_ | `#323233` |
| icon-class | Icon class name | _any_ | `''` |
| dot `2.5.5` | Whether to show red dot | _boolean_ | - |
| badge `2.5.6` | Content of the badge | _number \| string_ | - |
| url | Link | _string_ | - |
| 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` |
### ActionBarButton Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| text | Button text | _string_ | - |
| type | Button type, Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
| color `v2.1.8` | Button color, support linear-gradient | _string_ | - |
| icon `v2.4.4` | Left Icon | _string_ | - |
| primary | Is primary button (red color) | _boolean_ | `false` |
| disabled | Whether to disable button | _boolean_ | `false` |
| loading | Whether show loading status | _boolean_ | `false` |
| url | Link | _string_ | - |
| 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` |
### ActionBarIcon Slots
| Name | Description |
| ------- | ----------- |
| default | Text |
| icon | Custom icon |
### ActionBarButton Slots
| Name | Description |
| ------- | -------------- |
| default | Button content |
src/action-bar/README.zh-CN.md
+131
View File
@@ -0,0 +1,131 @@
# ActionBar 动作栏
### 引入
```js
import Vue from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
Vue.use(ActionBar);
Vue.use(ActionBarButton);
Vue.use(ActionBarIcon);
```
## 代码演示
### 基础用法
```html
<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
import { Toast } from 'vant';
export default {
methods: {
onClickIcon() {
Toast('点击图标');
},
onClickButton() {
Toast('点击按钮');
},
},
};
```
### 徽标提示
在 ActionBarIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```html
<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>
```
### 自定义图标颜色
通过 ActionBarIcon 的`color`属性可以自定义图标的颜色
```html
<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>
```
### 自定义按钮颜色
通过 ActionBarButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
```html
<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
### ActionBar Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
### ActionBarIcon Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 按钮文字 | _string_ | - |
| icon | 图标 | _string_ | - |
| color `v2.4.2` | 图标颜色 | _string_ | `#323233` |
| icon-class | 图标额外类名 | _any_ | - |
| dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
| url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### ActionBarButton Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 按钮文字 | _string_ | - |
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| disabled | 是否禁用按钮 | _boolean_ | `false` | - |
| loading | 是否显示为加载状态 | _boolean_ | `false` | - |
| url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### ActionBarIcon Slots
| 名称 | 说明 |
| ------- | ---------- |
| default | 文本内容 |
| icon | 自定义图标 |
### ActionBarButton Slots
| 名称 | 说明 |
| ------- | ------------ |
| default | 按钮显示内容 |
src/action-bar/demo/index.vue
+119
View File
@@ -0,0 +1,119 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-action-bar>
<van-action-bar-icon
icon="chat-o"
:text="t('icon1')"
@click="onClickIcon"
/>
<van-action-bar-icon
icon="cart-o"
:text="t('icon2')"
@click="onClickIcon"
/>
<van-action-bar-icon
icon="shop-o"
:text="t('icon3')"
@click="onClickIcon"
/>
<van-action-bar-button
type="danger"
:text="t('button2')"
@click="onClickButton"
/>
</van-action-bar>
</demo-block>
<demo-block :title="t('iconBadge')">
<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-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-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-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-action-bar-button
color="#7232dd"
type="danger"
:text="t('button2')"
/>
</van-action-bar>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
icon1: '客服',
icon2: '购物车',
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
iconBadge: '徽标提示',
collected: '已收藏',
clickIcon: '点击图标',
clickButton: '点击按钮',
customIconColor: '自定义图标颜色',
customButtonColor: '自定义按钮颜色',
},
'en-US': {
icon1: 'Icon1',
icon2: 'Icon2',
icon3: 'Icon3',
button1: 'Button',
button2: 'Button',
iconBadge: 'Icon Badge',
collected: 'Collected',
clickIcon: 'Click Icon',
clickButton: 'Click Button',
customIconColor: 'Custom Icon Color',
customButtonColor: 'Custom Button Color',
},
},
methods: {
onClickIcon() {
this.$toast(this.t('clickIcon'));
},
onClickButton() {
this.$toast(this.t('clickButton'));
},
},
};
</script>
<style lang="less">
.demo-action-bar {
.van-action-bar {
position: relative;
padding-bottom: 0;
}
}
</style>
src/action-bar/index.js
+23
View File
@@ -0,0 +1,23 @@
import { createNamespace } from '../utils';
import { ParentMixin } from '../mixins/relation';
const [createComponent, bem] = createNamespace('action-bar');
export default createComponent({
mixins: [ParentMixin('vanActionBar')],
props: {
safeAreaInsetBottom: {
type: Boolean,
default: true,
},
},
render() {
return (
<div class={bem({ unfit: !this.safeAreaInsetBottom })}>
{this.$slots.default?.()}
</div>
);
},
});
src/action-bar/index.less
+19
View File
@@ -0,0 +1,19 @@
@import '../style/var';
.van-action-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
box-sizing: content-box;
height: @action-bar-height;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @action-bar-background-color;
&--unfit {
padding-bottom: 0;
}
}
src/action-bar/test/__snapshots__/demo.spec.js.snap
+91
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>
`;
src/action-bar/test/__snapshots__/index.spec.js.snap
+39
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>`;
src/action-bar/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);
src/action-bar/test/index.spec.js
+97
View File
@@ -0,0 +1,97 @@
import ActionBar from '..';
import Button from '../../action-bar-button';
import Icon from '../../action-bar-icon';
import { mount } from '../../../test';
test('Button click event', () => {
const wrapper = mount(Button);
wrapper.trigger('click');
expect(wrapper.emitted('click').length).toEqual(1);
});
test('Icon click event', () => {
const wrapper = mount(Icon);
wrapper.trigger('click');
expect(wrapper.emitted('click').length).toEqual(1);
});
test('Button render default slot', () => {
const wrapper = mount({
render(h) {
return h(Button, null, ['Default Content']);
},
});
expect(wrapper).toMatchSnapshot();
});
test('Icon render default slot', () => {
const wrapper = mount({
render(h) {
return h(Icon, null, ['Default Content']);
},
});
expect(wrapper).toMatchSnapshot();
});
test('Icon render icon slot', () => {
const wrapper = mount({
render(h) {
return h(Icon, {
scopedSlots: {
default: () => 'Text',
icon: () => 'Custom Icon',
},
});
},
});
expect(wrapper).toMatchSnapshot();
});
test('Icon render icon slot with info', () => {
const wrapper = mount({
render(h) {
return h(Icon, {
props: {
info: '1',
},
scopedSlots: {
default: () => 'Text',
icon: () => 'Custom Icon',
},
});
},
});
expect(wrapper).toMatchSnapshot();
});
test('Icon render icon slot with dot', () => {
const wrapper = mount({
render(h) {
return h(Icon, {
props: {
dot: true,
},
scopedSlots: {
default: () => 'Text',
icon: () => 'Custom Icon',
},
});
},
});
expect(wrapper).toMatchSnapshot();
});
test('disable safe-area-inset-bottom prop', () => {
const wrapper = mount(ActionBar, {
propsData: {
safeAreaInsetBottom: false,
},
});
expect(wrapper).toMatchSnapshot();
});