ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-12-19 01:02:29 +08:00
Code Issues Actions 2 Packages 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
6 changed files with 115 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,22 +14,14 @@ Vue.use(GoodsActionMiniBtn);
```
### Usage
#### Basic Usage
```html
<van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
Icon1
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
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-mini-btn icon="chat" text="Icon1" @click="onClickMiniBtn" />
<van-goods-action-mini-btn icon="cart" text="Icon2" @click="onClickMiniBtn" />
<van-goods-action-big-btn text="Button1" @click="onClickBigBtn" />
<van-goods-action-big-btn text="Button2" @click="onClickBigBtn" primary />
</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
#### GoodsActionMiniBtn
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| icon | Icon | `String` | - | Icon 组件支持的所有图标 |
| text | Button text | `String` | - | - |
| icon | Icon | `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
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| url | Link URL | `String` | `javascript:;` | - |
| text | Button text | `String` | - | - |
| 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
<van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
客服
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
购物车
</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-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" />
<van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" />
<van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" />
<van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary />
</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
#### GoodsActionMiniBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| text | 按钮文字 | `String` | - | - |
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - |
| url | 跳转链接 | `String` | `javascript:;` | - |
| info | 图标右上角提示信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
#### GoodsActionBigBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| url | 跳转链接 | `String` | `javascript:;` | - |
| text | 按钮文字 | `String` | - | - |
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |