diff --git a/docs/demos/views/goods-action.vue b/docs/demos/views/goods-action.vue
index 9ede4ec29..142e3d897 100644
--- a/docs/demos/views/goods-action.vue
+++ b/docs/demos/views/goods-action.vue
@@ -2,18 +2,20 @@
-
- {{ $t('button1') }}
-
-
- {{ $t('button2') }}
-
-
- {{ $t('button3') }}
-
-
- {{ $t('button4') }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -25,18 +27,22 @@ export default {
'zh-CN': {
clickIcon: '点击图标',
clickButton: '点击按钮',
- button1: '客服',
- button2: '购物车',
- button3: '加入购物车',
- button4: '立即购买'
+ icon1: '客服',
+ icon2: '购物车',
+ icon3: '店铺',
+ button1: '加入购物车',
+ button2: '立即购买',
+ title2: '图标提示'
},
'en-US': {
clickIcon: 'Click Icon',
clickButton: 'Click Button',
- button1: 'Icon1',
- button2: 'Icon2',
- button3: 'Button1',
- button4: 'Button2'
+ icon1: 'Icon1',
+ icon2: 'Icon2',
+ icon3: 'Icon3',
+ button1: 'Button1',
+ button2: 'Button2',
+ title2: 'Icon info'
}
},
diff --git a/docs/markdown/en-US/goods-action.md b/docs/markdown/en-US/goods-action.md
index 10c0c7b32..8954eeebd 100644
--- a/docs/markdown/en-US/goods-action.md
+++ b/docs/markdown/en-US/goods-action.md
@@ -14,22 +14,14 @@ Vue.use(GoodsActionMiniBtn);
```
### Usage
-
+#### Basic Usage
```html
-
- Icon1
-
-
- Icon2
-
-
- Button1
-
-
- Button2
-
+
+
+
+
```
@@ -46,19 +38,40 @@ export default {
}
```
+#### Icon info
+Use `info` prop to show messages in upper right corner of icon
+
+```html
+
+
+
+
+
+
+
+```
+
### 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` | - |
diff --git a/docs/markdown/zh-CN/goods-action.md b/docs/markdown/zh-CN/goods-action.md
index 827cf2712..409c51d48 100644
--- a/docs/markdown/zh-CN/goods-action.md
+++ b/docs/markdown/zh-CN/goods-action.md
@@ -14,21 +14,14 @@ Vue.use(GoodsActionMiniBtn);
```
### 代码演示
+#### 基础用法
```html
-
- 客服
-
-
- 购物车
-
-
- 加入购物车
-
-
- 立即购买
-
+
+
+
+
```
@@ -45,19 +38,40 @@ export default {
}
```
+#### 图标提示
+通过`info`属性在图标右上角增加相应的提示
+
+```html
+
+
+
+
+
+
+
+```
+
### 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` | - |
diff --git a/packages/goods-action-big-btn/index.vue b/packages/goods-action-big-btn/index.vue
index e8b298c1e..5d9856f3e 100644
--- a/packages/goods-action-big-btn/index.vue
+++ b/packages/goods-action-big-btn/index.vue
@@ -5,26 +5,37 @@
class="van-goods-action__big-btn"
:type="primary ? 'primary' : 'default'"
bottomAction
- @click="$emit('click', $event)"
+ @click="onClick"
>
-
+ {{ text }}
diff --git a/packages/goods-action-mini-btn/index.vue b/packages/goods-action-mini-btn/index.vue
index ad508c37c..88db1a951 100644
--- a/packages/goods-action-mini-btn/index.vue
+++ b/packages/goods-action-mini-btn/index.vue
@@ -1,20 +1,32 @@
-
-
-
+
+
+ {{ text }}
diff --git a/packages/vant-css/src/goods-action.css b/packages/vant-css/src/goods-action.css
index 826b355d6..29d703823 100644
--- a/packages/vant-css/src/goods-action.css
+++ b/packages/vant-css/src/goods-action.css
@@ -39,10 +39,10 @@
&:active {
background-color: $active-color;
}
- }
- &__mini-btn-icon {
- font-size: 20px;
- margin-bottom: 5px;
+ &-icon {
+ font-size: 20px;
+ margin-bottom: 5px;
+ }
}
}