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

2025-04-06 03:57:59 +08:00 · 2017-12-18 11:45:44 +08:00 · 2017-12-18 11:45:44 +08:00 · d845bb8730
commit d845bb8730
parent a8666591c9
6 changed files with 115 additions and 59 deletions
--- a/docs/demos/views/goods-action.vue
+++ b/docs/demos/views/goods-action.vue
@ -2,18 +2,20 @@
  <demo-section>
    <demo-block :title="$t('basicUsage')">
      <van-goods-action>
-        <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
-          {{ $t('button1') }}
-        </van-goods-action-mini-btn>
-        <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
-          {{ $t('button2') }}
-        </van-goods-action-mini-btn>
-        <van-goods-action-big-btn @click="onClickBigBtn">
-          {{ $t('button3') }}
-        </van-goods-action-big-btn>
-        <van-goods-action-big-btn @click="onClickBigBtn" primary>
-          {{ $t('button4') }}
-        </van-goods-action-big-btn>
+        <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn icon="cart" :text="$t('icon2')" @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>
+    </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <van-goods-action>
+        <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn icon="cart" info="5" :text="$t('icon2')" @click="onClickMiniBtn" />
+        <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>
    </demo-block>
  </demo-section>
@ -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'
    }
  },

--- 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
 <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` | - |
--- a/docs/markdown/zh-CN/goods-action.md
+++ b/docs/markdown/zh-CN/goods-action.md
@ -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` | - |
--- 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"
  >
-    <slot></slot>
+    <slot>{{ text }}</slot>
  </van-button>
 </template>

 <script>
 import { create } from '../utils';
 import VanButton from '../button';
+import RouterLink from '../mixins/router-link';

 export default create({
  name: 'van-goods-action-big-btn',

+  mixins: [RouterLink],
+
  components: {
    VanButton
  },

  props: {
    url: String,
+    text: String,
    primary: Boolean
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      this.routerLink();
+    }
  }
 });
 </script>
--- a/packages/goods-action-mini-btn/index.vue
+++ b/packages/goods-action-mini-btn/index.vue
@ -1,20 +1,32 @@
 <template>
-  <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);">
-    <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :name="icon" />
-    <slot></slot>
+  <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="onClick">
+    <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :info="info" :name="icon" />
+    <slot>{{ text }}</slot>
  </a>
 </template>

 <script>
 import { create } from '../utils';
+import RouterLink from '../mixins/router-link';

 export default create({
  name: 'van-goods-action-mini-btn',

+  mixins: [RouterLink],
+
  props: {
    url: String,
+    text: String,
+    info: String,
    icon: String,
    iconClass: String
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      this.routerLink();
+    }
  }
 });
 </script>
--- 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;
+    }
  }
 }