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

[new feature] GoodsAction: support routerLink & info (#448)

Browse Source
This commit is contained in:
neverland 2017-12-18 11:45:44 +08:00 committed by GitHub
parent a8666591c9
commit d845bb8730
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 115 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/demos/views/goods-action.vue
View File

@ -2,18 +2,20 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn"> <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
{{ $t('button1') }} <van-goods-action-mini-btn icon="cart" :text="$t('icon2')" @click="onClickMiniBtn" />
</van-goods-action-mini-btn> <van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn"> <van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
{{ $t('button2') }} </van-goods-action>
</van-goods-action-mini-btn> </demo-block>
<van-goods-action-big-btn @click="onClickBigBtn">
{{ $t('button3') }} <demo-block :title="$t('title2')">
</van-goods-action-big-btn> <van-goods-action>
<van-goods-action-big-btn @click="onClickBigBtn" primary> <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
{{ $t('button4') }} <van-goods-action-mini-btn icon="cart" info="5" :text="$t('icon2')" @click="onClickMiniBtn" />
</van-goods-action-big-btn> <van-goods-action-mini-btn icon="shop" :text="$t('icon3')" @click="onClickMiniBtn" />
<van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
<van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
</demo-section> </demo-section>
@ -25,18 +27,22 @@ export default {
'zh-CN': { 'zh-CN': {
clickIcon: '点击图标', clickIcon: '点击图标',
clickButton: '点击按钮', clickButton: '点击按钮',
button1: '客服', icon1: '客服',
button2: '购物车', icon2: '购物车',
button3: '加入购物车', icon3: '店铺',
button4: '立即购买' button1: '加入购物车',
button2: '立即购买',
title2: '图标提示'
}, },
'en-US': { 'en-US': {
clickIcon: 'Click Icon', clickIcon: 'Click Icon',
clickButton: 'Click Button', clickButton: 'Click Button',
button1: 'Icon1', icon1: 'Icon1',
button2: 'Icon2', icon2: 'Icon2',
button3: 'Button1', icon3: 'Icon3',
button4: 'Button2' button1: 'Button1',
button2: 'Button2',
title2: 'Icon info'
} }
}, },

45
docs/markdown/en-US/goods-action.md
View File

@ -14,22 +14,14 @@ Vue.use(GoodsActionMiniBtn);
``` ```
### Usage ### Usage
#### Basic Usage
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn"> <van-goods-action-mini-btn icon="chat" text="Icon1" @click="onClickMiniBtn" />
Icon1 <van-goods-action-mini-btn icon="cart" text="Icon2" @click="onClickMiniBtn" />
</van-goods-action-mini-btn> <van-goods-action-big-btn text="Button1" @click="onClickBigBtn" />
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn"> <van-goods-action-big-btn text="Button2" @click="onClickBigBtn" primary />
Icon2
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="onClickBigBtn">
Button1
</van-goods-action-big-btn>
<van-goods-action-big-btn @click="onClickBigBtn" primary>
Button2
</van-goods-action-big-btn>
</van-goods-action> </van-goods-action>
``` ```
@ -46,19 +38,40 @@ export default {
} }
``` ```
#### Icon info
Use `info` prop to show messages in upper right corner of icon
```html
<van-goods-action>
<van-goods-action-mini-btn icon="chat" text="Icon1" />
<van-goods-action-mini-btn icon="cart" text="Icon2" info="5" />
<van-goods-action-mini-btn icon="shop" text="Icon3" />
<van-goods-action-big-btn text="Button1" />
<van-goods-action-big-btn text="Button2" primary />
</van-goods-action>
```
### API ### API
#### GoodsActionMiniBtn #### GoodsActionMiniBtn
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | Icon | `String` | - | Icon 组件支持的所有图标 | | text | Button text | `String` | - | - |
| icon | Icon | `String` | - | - |
| iconClass | Icon class name | `String` | `''` | - | | iconClass | Icon class name | `String` | `''` | - |
| url | Link URL | `String` | `javascript:;` | - | | info | Info message | `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 | `String` | `false` | - |
#### GoodsActionBigBtn #### GoodsActionBigBtn
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| url | Link URL | `String` | `javascript:;` | - | | text | Button text | `String` | - | - |
| primary | Is primary button (red color) | `Boolean` | `false` | - | | primary | Is primary button (red color) | `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 | `String` | `false` | - |

42
docs/markdown/zh-CN/goods-action.md
View File

@ -14,21 +14,14 @@ Vue.use(GoodsActionMiniBtn);
``` ```
### 代码演示 ### 代码演示
#### 基础用法
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn"> <van-goods-action-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" />
客服 <van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" />
</van-goods-action-mini-btn> <van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" />
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn"> <van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary />
购物车
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="onClickBigBtn">
加入购物车
</van-goods-action-big-btn>
<van-goods-action-big-btn @click="onClickBigBtn" primary>
立即购买
</van-goods-action-big-btn>
</van-goods-action> </van-goods-action>
``` ```
@ -45,19 +38,40 @@ export default {
} }
``` ```
#### 图标提示
通过`info`属性在图标右上角增加相应的提示
```html
<van-goods-action>
<van-goods-action-mini-btn icon="chat" text="客服" />
<van-goods-action-mini-btn icon="cart" text="购物车" info="5" />
<van-goods-action-mini-btn icon="shop" text="店铺" />
<van-goods-action-big-btn text="加入购物车" />
<van-goods-action-big-btn text="立即购买" primary />
</van-goods-action>
```
### API ### API
#### GoodsActionMiniBtn #### GoodsActionMiniBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| text | 按钮文字 | `String` | - | - |
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 | | icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - | | iconClass | 图标额外类名 | `String` | `''` | - |
| url | 跳转链接 | `String` | `javascript:;` | - | | info | 图标右上角提示信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
#### GoodsActionBigBtn #### GoodsActionBigBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| url | 跳转链接 | `String` | `javascript:;` | - | | text | 按钮文字 | `String` | - | - |
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - | | primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |

15
packages/goods-action-big-btn/index.vue
View File

@ -5,26 +5,37 @@
class="van-goods-action__big-btn" class="van-goods-action__big-btn"
:type="primary ? 'primary' : 'default'" :type="primary ? 'primary' : 'default'"
bottomAction bottomAction
@click="$emit('click', $event)" @click="onClick"
> >
<slot></slot> <slot>{{ text }}</slot>
</van-button> </van-button>
</template> </template>
<script> <script>
import { create } from '../utils'; import { create } from '../utils';
import VanButton from '../button'; import VanButton from '../button';
import RouterLink from '../mixins/router-link';
export default create({ export default create({
name: 'van-goods-action-big-btn', name: 'van-goods-action-big-btn',
mixins: [RouterLink],
components: { components: {
VanButton VanButton
}, },
props: { props: {
url: String, url: String,
text: String,
primary: Boolean primary: Boolean
},
methods: {
onClick(event) {
this.$emit('click', event);
this.routerLink();
}
} }
}); });
</script> </script>

18
packages/goods-action-mini-btn/index.vue
View File

@ -1,20 +1,32 @@
<template> <template>
<a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);"> <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="onClick">
<icon class="van-goods-action__mini-btn-icon" :class="iconClass" :name="icon" /> <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :info="info" :name="icon" />
<slot></slot> <slot>{{ text }}</slot>
</a> </a>
</template> </template>
<script> <script>
import { create } from '../utils'; import { create } from '../utils';
import RouterLink from '../mixins/router-link';
export default create({ export default create({
name: 'van-goods-action-mini-btn', name: 'van-goods-action-mini-btn',
mixins: [RouterLink],
props: { props: {
url: String, url: String,
text: String,
info: String,
icon: String, icon: String,
iconClass: String iconClass: String
},
methods: {
onClick(event) {
this.$emit('click', event);
this.routerLink();
}
} }
}); });
</script> </script>

8
packages/vant-css/src/goods-action.css
View File

@ -39,10 +39,10 @@
&:active { &:active {
background-color: $active-color; background-color: $active-color;
} }
}
&__mini-btn-icon { &-icon {
font-size: 20px; font-size: 20px;
margin-bottom: 5px; margin-bottom: 5px;
}
} }
} }