Badge: update document

docs/examples-docs/badge.md

@@ -1,29 +1,36 @@
 <style>
 .demo-badge {
-  .badge-group-wrapper {
-    padding: 30px 20px;
+  .van-badge-group {
+    width: auto;
+    margin: 0 15px;
+    padding: 20px 0;
     background-color: #fff;
+
+    &::after {
+      display: none;
+    }
   }
 
-  .van-badge-group {
+  .van-badge {
+    width: 85px;
     margin: 0 auto;
   }
 }
 </style>
 
 <script>
-  export default {
-    data() {
-      return {
-        activeKey: '2'
-      };
-    },
-    methods: {
-      onItemClick(e, data) {
-        this.activeKey = data.mark;
-      }
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
     }
-  };
+  }
+};
 </script>
 
 ## Badge 徽章
@@ -39,48 +46,44 @@ Vue.component(Badge.name, Badge);
 
 #### 基础用法
 
-默认情况下激活第一个`badge`。
+通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
 
 :::demo 基础用法
 ```html
-<div class="badge-group-wrapper">
-  <van-badge-group>
-    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
-    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
-    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
-    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
-  </van-badge-group>
-</div>
+<van-badge-group :active-key="activeKey">
+  <van-badge title="热销榜" @click="onClick"></van-badge>
+  <van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
+  <van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
+  <van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
+</van-badge-group>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
+    }
+  }
+};
 ```
 :::
 
-#### 选中某个badge
 
-如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
+### BadgeGroup API
 
-:::demo 选中某个badge
-```html
-<div class="badge-group-wrapper">
-  <van-badge-group :active-key="2">
-    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
-    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
-    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
-    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
-  </van-badge-group>
-</div>
-```
-:::
-
-### z-badge-group API
-
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| active-key | 激活的`badge`的索引 | `string`  | `0`但必须子badge里的mark是有`0`位索引 |           |
+| active-key | 选中`badge`的索引 | `String | Number`  | `0` | - |
 
-
-### z-badge API
-| 参数       | 说明      | 类型       | 默认值       | 必须       |
+### Badge API
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| title | badge的文案标题 | `string`  | `''`          | `required`          |
-| info | 当前badge的提示消息 | `string`  | `''`         |           |
-| url | 跳转链接 | `string`  | 链接直接跳转或者hash          |           |
+| title | 内容 | `String` | `''` | - |
+| info | 提示消息 | `String`  | `''` | - |
+| url | 跳转链接 | `String` | - | - |

packages/badge/index.vue

@@ -1,12 +1,8 @@
 <template>
-  <a
-    class="van-badge"
-    :class="{ 'van-badge--select': isSelect }"
-    :href="url"
-    @click="handleClick">
+  <a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
     <div class="van-badge__active"></div>
-    <div v-if="info" class="van-badge__info">{{info}}</div>
-    {{title}}
+    <div v-if="info" class="van-badge__info">{{ info }}</div>
+    {{ title }}
   </a>
 </template>
 
@@ -40,12 +36,8 @@ export default {
   },
 
   methods: {
-    handleClick(e) {
-      this.$emit('click', e, {
-        title: this.title,
-        url: this.url,
-        info: this.info
-      });
+    onClick() {
+      this.$emit('click', this.$parent.badges.indexOf(this));
     }
   }
 };