mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
[improvement] GoodsAction: rebuild api (#759)
This commit is contained in:
neverland
GitHub
parent
606c2896c1
commit
6bec99306d
@ -15,18 +15,19 @@ const PREFIX = 'https://img.yzcdn.cn/vant-weapp/';
|
||||
const MAP = {
|
||||
index: 'index-201808121630.png',
|
||||
'action-sheet': 'action-sheet-201809071648.png',
|
||||
area: 'area-201809271357.png',
|
||||
area: 'area-20181015.png',
|
||||
badge: 'badge-201808092138.png',
|
||||
button: 'button-201808092138.png',
|
||||
button: 'button-20181015.png',
|
||||
card: 'card-201808092138.png',
|
||||
col: 'layout-201808092138.png',
|
||||
cell: 'cell-201808092138.png',
|
||||
dialog: 'dialog-201809071648.png',
|
||||
field: 'field-201808092138.png',
|
||||
'goods-action': 'goods-action-20181015.png',
|
||||
icon: 'icon-201808092138.png',
|
||||
loading: 'loading-201808092138.png',
|
||||
'nav-bar': 'nav-bar-201808110751.png',
|
||||
'notice-bar': 'notice-bar-201808092138.png',
|
||||
'notice-bar': 'notice-bar-20181015.png',
|
||||
notify: 'notify-201808112050.png',
|
||||
panel: 'panel-201808092138.png',
|
||||
popup: 'popup-201808092138.png',
|
||||
@ -35,11 +36,11 @@ const MAP = {
|
||||
slider: 'slider-201808221024.png',
|
||||
stepper: 'stepper-201808092138.png',
|
||||
search: 'search-201808092138.png',
|
||||
steps: 'steps-201808092138.png',
|
||||
steps: 'steps-20181015.png',
|
||||
switch: 'switch-201808092138.png',
|
||||
'switch-cell': 'switch-cell-201808221124.png',
|
||||
'submit-bar': 'submit-bar-a-201809271357.png',
|
||||
tab: 'tab-201809051457.png',
|
||||
tab: 'tab-20181015.png',
|
||||
tag: 'tag-201808092138.png',
|
||||
tabbar: 'tabbar-201808160922.png',
|
||||
toast: 'toast-201808191046.png',
|
||||
|
||||
@ -2,74 +2,11 @@ import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
btnList: [
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'chat',
|
||||
text: '客服',
|
||||
bindClickEventName: 'onClickChatBtn'
|
||||
},
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'cart',
|
||||
text: '购物车'
|
||||
},
|
||||
{
|
||||
type: 'big',
|
||||
text: '加入购物车'
|
||||
},
|
||||
{
|
||||
type: 'big',
|
||||
text: '立即购买',
|
||||
primary: true,
|
||||
bindClickEventName: 'onClickBuyBtn'
|
||||
}
|
||||
],
|
||||
btnListInfo: [
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'chat',
|
||||
text: '客服',
|
||||
url: '/pages/submit-bar/index',
|
||||
replace: true,
|
||||
info: 15
|
||||
},
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: '5'
|
||||
},
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'shop',
|
||||
text: '店铺'
|
||||
},
|
||||
{
|
||||
type: 'big',
|
||||
text: '加入购物车'
|
||||
},
|
||||
{
|
||||
type: 'big',
|
||||
text: '立即购买',
|
||||
primary: true,
|
||||
url: '/pages/submit-bar/index',
|
||||
replace: false
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
const { bindClickEventName } = event.detail;
|
||||
this[`${bindClickEventName}`]();
|
||||
},
|
||||
|
||||
onClickChatBtn() {
|
||||
onClickIcon() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
|
||||
onClickBuyBtn() {
|
||||
onClickButton() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
});
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
"usingComponents": {
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-goods-action": "../../dist/goods-action/index",
|
||||
"van-goods-action-big-btn": "../../dist/goods-action-big-btn/index",
|
||||
"van-goods-action-mini-btn": "../../dist/goods-action-mini-btn/index",
|
||||
"van-goods-action-icon": "../../dist/goods-action-icon/index",
|
||||
"van-goods-action-button": "../../dist/goods-action-button/index",
|
||||
"van-submit-bar": "../../dist/submit-bar/index",
|
||||
"van-toast": "../../dist/toast/index"
|
||||
}
|
||||
|
||||
@ -1,11 +1,35 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-goods-action icon-class="icon-color" btn-list="{{ btnList }}" bind:click="onClick" />
|
||||
<van-goods-action custom-class="goods-action">
|
||||
<van-goods-action-icon
|
||||
icon="chat"
|
||||
text="客服"
|
||||
bind:click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="cart"
|
||||
text="购物车"
|
||||
bind:click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
text="加入购物车"
|
||||
type="warning"
|
||||
bind:click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
text="立即购买"
|
||||
bind:click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="图标提示">
|
||||
<van-goods-action btn-list="{{ btnListInfo }}" bind:click="onClick" />
|
||||
<van-goods-action custom-class="goods-action">
|
||||
<van-goods-action-icon icon="chat" text="客服" />
|
||||
<van-goods-action-icon icon="cart" text="购物车" info="5" />
|
||||
<van-goods-action-icon icon="shop" text="店铺" />
|
||||
<van-goods-action-button text="加入购物车" type="warning" />
|
||||
<van-goods-action-button text="立即购买" />
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.van-goods-action {
|
||||
.goods-action {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.icon-color {
|
||||
color: #06bf04!important;
|
||||
}
|
||||
|
||||
@ -42,5 +42,12 @@ VantComponent({
|
||||
const { titleWidth } = this.data;
|
||||
return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
this.$emit('click', event.detail);
|
||||
this.jumpLink();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -21,7 +21,7 @@ function VantComponent<Data, Props, Watch, Methods, Computed>(
|
||||
Methods,
|
||||
Computed,
|
||||
CombinedComponentInstance<Data, Props, Watch, Methods, Computed>
|
||||
>
|
||||
> = {}
|
||||
): void {
|
||||
const options: any = {};
|
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
url: String,
|
||||
text: String,
|
||||
bindClickEventName: String,
|
||||
primary: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
replace: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
const { bindClickEventName } = this.data;
|
||||
this.$emit('click', {...event.detail, bindClickEventName});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,20 +0,0 @@
|
||||
<navigator wx:if="{{ url }}" url="{{ url }}" open-type="{{ replace ? 'redirect' : 'navigate' }}">
|
||||
<template is="big-btn" data="{{ primary, text }}"></template>
|
||||
</navigator>
|
||||
|
||||
<block wx:else>
|
||||
<template is="big-btn" data="{{ primary, text }}"></template>
|
||||
</block>
|
||||
|
||||
<template name="big-btn">
|
||||
<van-button
|
||||
type="{{ primary ? 'danger' : 'warning' }}"
|
||||
square
|
||||
size="large"
|
||||
bind:click="onClick"
|
||||
>
|
||||
{{ text }}
|
||||
</van-button>
|
||||
</template>
|
||||
|
||||
|
||||
3
packages/goods-action-button/index.less
Normal file
3
packages/goods-action-button/index.less
Normal file
@ -0,0 +1,3 @@
|
||||
:host {
|
||||
flex: 1;
|
||||
}
|
||||
21
packages/goods-action-button/index.ts
Normal file
21
packages/goods-action-button/index.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { link } from '../mixins/link';
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
mixins: [link],
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
type: {
|
||||
type: String,
|
||||
value: 'danger'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
this.$emit('click', event.detail);
|
||||
this.jumpLink();
|
||||
}
|
||||
}
|
||||
});
|
||||
8
packages/goods-action-button/index.wxml
Normal file
8
packages/goods-action-button/index.wxml
Normal file
@ -0,0 +1,8 @@
|
||||
<van-button
|
||||
square
|
||||
size="large"
|
||||
type="{{ type }}"
|
||||
bind:click="onClick"
|
||||
>
|
||||
{{ text }}
|
||||
</van-button>
|
||||
7
packages/goods-action-icon/index.json
Normal file
7
packages/goods-action-icon/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index",
|
||||
"van-button": "../button/index"
|
||||
}
|
||||
}
|
||||
20
packages/goods-action-icon/index.less
Normal file
20
packages/goods-action-icon/index.less
Normal file
@ -0,0 +1,20 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-goods-action-icon {
|
||||
width: 50px !important;
|
||||
border: none !important;
|
||||
|
||||
&__content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
font-size: 10px;
|
||||
color: @gray-darker;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
19
packages/goods-action-icon/index.ts
Normal file
19
packages/goods-action-icon/index.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { link } from '../mixins/link';
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
mixins: [link],
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
info: String,
|
||||
icon: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
this.$emit('click', event.detail);
|
||||
this.jumpLink();
|
||||
}
|
||||
}
|
||||
});
|
||||
15
packages/goods-action-icon/index.wxml
Normal file
15
packages/goods-action-icon/index.wxml
Normal file
@ -0,0 +1,15 @@
|
||||
<van-button
|
||||
custom-class="van-goods-action-icon"
|
||||
size="large"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view class="van-goods-action-icon__content van-hairline--right">
|
||||
<van-icon
|
||||
size="20px"
|
||||
name="{{ icon }}"
|
||||
info="{{ info }}"
|
||||
class="van-goods-action-icon__icon"
|
||||
/>
|
||||
{{ text }}
|
||||
</view>
|
||||
</van-button>
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index"
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-goods-action-mini-btn {
|
||||
color: @gray-darker;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
background-color: @white;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.van-goods-action-mini-btn__icon {
|
||||
width: 1em;
|
||||
font-size: 20px;
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
classes: [
|
||||
'icon-class'
|
||||
],
|
||||
|
||||
props: {
|
||||
url: String,
|
||||
text: String,
|
||||
info: String,
|
||||
icon: String,
|
||||
bindClickEventName: String,
|
||||
replace: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
const { bindClickEventName } = this.data;
|
||||
this.$emit('click', {...event.detail, bindClickEventName});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
<navigator wx:if="{{ url }}" url="{{ url }}" open-type="{{ replace ? 'redirect' : 'navigate' }}">
|
||||
<template is="mini-btn" data="{{ icon, info, text }}"></template>
|
||||
</navigator>
|
||||
|
||||
<block wx:else>
|
||||
<template is="mini-btn" data="{{ icon, info, text }}"></template>
|
||||
</block>
|
||||
|
||||
<template name="mini-btn">
|
||||
<view class="van-goods-action-mini-btn icon-class" bindtap="onClick">
|
||||
<van-icon
|
||||
name="{{ icon }}"
|
||||
info="{{ info }}"
|
||||
class="van-goods-action-mini-btn__icon"
|
||||
/>
|
||||
{{ text }}
|
||||
</view>
|
||||
</template>
|
||||
@ -4,7 +4,9 @@
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-goods-action": "path/to/vant-weapp/dist/goods-action/index"
|
||||
"van-goods-action": "path/to/vant-weapp/dist/goods-action/index",
|
||||
"van-goods-action-icon": "path/to/vant-weapp/dist/goods-action-icon/index",
|
||||
"van-goods-action-button": "path/to/vant-weapp/dist/goods-action-button/index"
|
||||
}
|
||||
```
|
||||
|
||||
@ -13,76 +15,73 @@
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-goods-action
|
||||
btn-list="{{ btnList }}"
|
||||
bind:click="onClick"
|
||||
/>
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon
|
||||
icon="chat"
|
||||
text="客服"
|
||||
bind:click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="cart"
|
||||
text="购物车"
|
||||
bind:click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
text="加入购物车"
|
||||
type="warning"
|
||||
bind:click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
text="立即购买"
|
||||
bind:click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
btnList: [
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'chat',
|
||||
text: '客服',
|
||||
bindClickEventName: 'onClickChatBtn'
|
||||
},
|
||||
{
|
||||
type: 'mini',
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 5,
|
||||
url: '/pages/submit-bar/index',
|
||||
replace: true
|
||||
},
|
||||
{
|
||||
type: 'big',
|
||||
text: '加入购物车',
|
||||
bindClickEventName: 'onClickBuyBtn'
|
||||
},
|
||||
{
|
||||
type: 'big',
|
||||
text: '立即购买',
|
||||
primary: true,
|
||||
url: '/pages/submit-bar/index',
|
||||
replace: false
|
||||
}
|
||||
]
|
||||
onClickIcon() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
const { bindClickEventName } = event.detail;
|
||||
this[`${bindClickEventName}`]();
|
||||
},
|
||||
|
||||
onClickChatBtn() {
|
||||
console.log('点击图标');
|
||||
},
|
||||
|
||||
onClickBuyBtn() {
|
||||
console.log('点击按钮');
|
||||
onClickButton() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
});
|
||||
````
|
||||
```
|
||||
|
||||
### API
|
||||
#### 图标提示
|
||||
|
||||
通过`info`属性在图标右上角增加相应的提示
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat" text="客服" />
|
||||
<van-goods-action-icon icon="cart" text="购物车" info="5" />
|
||||
<van-goods-action-icon icon="shop" text="店铺" />
|
||||
<van-goods-action-button text="加入购物车" type="warning" />
|
||||
<van-goods-action-button text="立即购买" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### GoodsActionIcon API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| btn-list | 按钮列表 | `Array` | - |
|
||||
|
||||
#### btn-list
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 按钮类型，可选值为 `mini` `big` | `String` | - |
|
||||
| text | 按钮文字 | `String` | - |
|
||||
| icon | 图标 | `String` | - |
|
||||
| icon | 图标类型，可选值见`icon`组件 | `String` | - |
|
||||
| info | 图标右上角提示信息 | `String | Number` | - |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
| replace | 跳转时是否替换当前 history | `String` | `false` |
|
||||
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
|
||||
|
||||
### GoodsActionButton API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| text | 按钮文字 | `String` | - |
|
||||
| type | 按钮类型 | `String` | `danger` |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` |
|
||||
|
||||
### Event
|
||||
|
||||
@ -90,14 +89,8 @@ Page({
|
||||
|-----------|-----------|-----------|
|
||||
| click | 按钮点击事件回调 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon-class | icon按钮样式类 |
|
||||
|
||||
### 更新日志
|
||||
|
||||
| 版本 | 类型 | 内容 |
|
||||
|-----------|-----------|-----------|
|
||||
| 0.3.6 | feature | 新增组件 |
|
||||
| 0.3.9 | feature | 新增组件 |
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-goods-action-mini-btn": "../goods-action-mini-btn/index",
|
||||
"van-goods-action-big-btn": "../goods-action-big-btn/index"
|
||||
}
|
||||
"component": true
|
||||
}
|
||||
|
||||
@ -7,24 +7,3 @@
|
||||
display: flex;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.van-goods-action-big-btn {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.van-goods-action-mini-btn {
|
||||
min-width: 15%;
|
||||
}
|
||||
|
||||
.van-goods-action-mini-btn::after {
|
||||
border-width: 1px 0 0 1px;
|
||||
}
|
||||
|
||||
.van-goods-action-mini-btn:first-child::after {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.van-goods-action-mini-btn:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
|
||||
@ -1,20 +1,3 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
classes: [
|
||||
'icon-class'
|
||||
],
|
||||
|
||||
props: {
|
||||
btnList: Array
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event: Weapp.Event) {
|
||||
const { bindClickEventName } = event.detail;
|
||||
if (bindClickEventName) {
|
||||
this.$emit('click', event.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
VantComponent();
|
||||
|
||||
@ -1,27 +1,3 @@
|
||||
<view class="van-goods-action">
|
||||
<block wx:for="{{ btnList }}" wx:key="{{ index }}">
|
||||
<van-goods-action-mini-btn
|
||||
wx:if="{{ item.type === 'mini' }}"
|
||||
bind:click="onClick"
|
||||
class="van-goods-action-mini-btn van-hairline"
|
||||
icon-class="icon-class"
|
||||
icon="{{ item.icon }}"
|
||||
text="{{ item.text }}"
|
||||
info="{{ item.info }}"
|
||||
url="{{ item.url }}"
|
||||
replace="{{ item.replace }}"
|
||||
bind-click-event-name="{{ item.bindClickEventName }}"
|
||||
/>
|
||||
|
||||
<van-goods-action-big-btn
|
||||
wx:elif="{{ item.type === 'big' }}"
|
||||
bind:click="onClick"
|
||||
class="van-goods-action-big-btn"
|
||||
primary="{{ item.primary }}"
|
||||
text="{{ item.text }}"
|
||||
url="{{ item.url }}"
|
||||
replace="{{ item.replace }}"
|
||||
bind-click-event-name="{{ item.bindClickEventName }}"
|
||||
/>
|
||||
</block>
|
||||
<view class="van-goods-action custom-class">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user