[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon
|
||||
icon="chat-o"
|
||||
:text="$t('icon1')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="cart-o"
|
||||
:text="$t('icon2')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
:text="$t('button1')"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon
|
||||
icon="chat-o"
|
||||
:text="$t('icon1')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="cart-o"
|
||||
info="5"
|
||||
:text="$t('icon2')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="shop-o"
|
||||
:text="$t('icon3')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
:text="$t('button1')"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
clickIcon: '点击图标',
|
||||
clickButton: '点击按钮',
|
||||
icon1: '客服',
|
||||
icon2: '购物车',
|
||||
icon3: '店铺',
|
||||
button1: '加入购物车',
|
||||
button2: '立即购买',
|
||||
title2: '图标提示'
|
||||
},
|
||||
'en-US': {
|
||||
clickIcon: 'Click Icon',
|
||||
clickButton: 'Click Button',
|
||||
icon1: 'Icon1',
|
||||
icon2: 'Icon2',
|
||||
icon3: 'Icon3',
|
||||
button1: 'Button1',
|
||||
button2: 'Button2',
|
||||
title2: 'Icon info'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
this.$toast(this.$t('clickIcon'));
|
||||
},
|
||||
|
||||
onClickButton() {
|
||||
this.$toast(this.$t('clickButton'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-goods-action {
|
||||
.van-goods-action {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
# GoodsAction
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import {
|
||||
GoodsAction,
|
||||
GoodsActionButton,
|
||||
GoodsActionIcon
|
||||
} from 'vant';
|
||||
|
||||
Vue
|
||||
.use(GoodsAction)
|
||||
.use(GoodsActionButton)
|
||||
.use(GoodsActionIcon);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### 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-button
|
||||
type="warning"
|
||||
text="Button1"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
text="Button2"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
Toast('Click Icon');
|
||||
},
|
||||
onClickButton() {
|
||||
Toast('Click Button');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Icon info
|
||||
|
||||
Use `info` prop to show messages in upper right corner of icon
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon
|
||||
icon="chat-o"
|
||||
text="Icon1"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
info="5"
|
||||
icon="cart-o"
|
||||
text="Icon2"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="shop-o"
|
||||
text="Icon3"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
text="Button1"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
text="Button2"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### GoodsAction Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
|
||||
|
||||
### GoodsActionIcon Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| text | Button text | `String` | - |
|
||||
| icon | Icon | `String` | - |
|
||||
| icon-class | Icon class name | `any` | `''` |
|
||||
| info | Info message | `String | Number` | - |
|
||||
| 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` |
|
||||
|
||||
### GoodsActionButton Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| type | Button type, Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
|
||||
| text | Button text | `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` |
|
||||
@@ -0,0 +1,15 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-goods-action {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
background-color: @goods-action-background-color;
|
||||
|
||||
&--safe-area-inset-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { inherit } from '../utils/functional';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
|
||||
export type GoodsActionProps = {
|
||||
safeAreaInsetBottom?: boolean;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('goods-action');
|
||||
|
||||
function GoodsAction(
|
||||
h: CreateElement,
|
||||
props: GoodsActionProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{slots.default && slots.default()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
GoodsAction.props = {
|
||||
safeAreaInsetBottom: Boolean
|
||||
};
|
||||
|
||||
export default createComponent<GoodsActionProps>(GoodsAction);
|
||||
@@ -0,0 +1,39 @@
|
||||
// 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 van-hairline">
|
||||
<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 van-hairline">
|
||||
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
|
||||
<!---->
|
||||
</div>购物车
|
||||
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-goods-action">
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
|
||||
<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 van-hairline">
|
||||
<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 van-hairline">
|
||||
<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
|
||||
<!---->
|
||||
</div>店铺
|
||||
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`;
|
||||
|
||||
exports[`Icon render default slot 1`] = `
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
|
||||
<div class="van-icon van-icon-undefined van-goods-action-icon__icon">
|
||||
<!---->
|
||||
</div>Default Content
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,51 @@
|
||||
import Button from '../../goods-action-button';
|
||||
import Icon from '../../goods-action-icon';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('Button click event', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(Button, {
|
||||
context: {
|
||||
on: {
|
||||
click
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('Icon click event', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(Icon, {
|
||||
context: {
|
||||
on: {
|
||||
click
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(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();
|
||||
});
|
||||
@@ -0,0 +1,120 @@
|
||||
# GoodsAction 商品导航
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import {
|
||||
GoodsAction,
|
||||
GoodsActionIcon,
|
||||
GoodsActionButton
|
||||
} from 'vant';
|
||||
|
||||
Vue
|
||||
.use(GoodsAction)
|
||||
.use(GoodsActionIcon)
|
||||
.use(GoodsActionButton);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```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-button
|
||||
type="warning"
|
||||
text="加入购物车"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
text="立即购买"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickIcon() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
onClickButton() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 图标提示
|
||||
|
||||
通过`info`属性在图标右上角增加相应的提示
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon
|
||||
icon="chat-o"
|
||||
text="客服"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
info="5"
|
||||
icon="cart-o"
|
||||
text="购物车"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="shop-o"
|
||||
text="店铺"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
text="加入购物车"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
text="立即购买"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### GoodsAction Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
|
||||
|
||||
### GoodsActionIcon Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| text | 按钮文字 | `String` | - | - |
|
||||
| icon | 图标 | `String` | - | - |
|
||||
| icon-class | 图标额外类名 | `any` | - | - |
|
||||
| info | 图标右上角提示信息 | `String | Number` | - | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
|
||||
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
|
||||
|
||||
### GoodsActionButton Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| text | 按钮文字 | `String` | - | - |
|
||||
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` |
|
||||
| disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
|
||||
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
|
||||
Reference in New Issue
Block a user