[new feature] Badge: add new event click & improve docs

fix #1542

packages/badge-group/index.ts

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-import { isNumber } from '../common/utils';
 
 VantComponent({
   relation: {
@@ -7,52 +6,48 @@ VantComponent({
     type: 'descendant',
     linked(target: Weapp.Component) {
       this.badges.push(target);
-      this.setActive();
+      this.setActive(this.data.active);
     },
     unlinked(target: Weapp.Component) {
       this.badges = this.badges.filter(item => item !== target);
-      this.setActive();
+      this.setActive(this.data.active);
     }
   },
 
   props: {
     active: {
       type: Number,
-      value: 0
+      value: 0,
+      observer: 'setActive'
     }
   },
 
-  watch: {
-    active: 'setActive'
-  },
-
   beforeCreate() {
     this.badges = [];
     this.currentActive = -1;
   },
 
   methods: {
-    setActive(badge: Weapp.Component | number) {
+    setActive(active: number) {
-      let { active } = this.data;
+      const { badges, currentActive } = this;
-      const { badges } = this;
 
-      if (badge && !isNumber(badge)) {
+      if (!badges.length) {
-        active = badges.indexOf(badge);
+        return Promise.resolve();
       }
 
-      if (active === this.currentActive) {
+      this.currentActive = active;
-        return;
-      }
 
-      if (this.currentActive !== -1 && badges[this.currentActive]) {
+      const stack = [];
-        this.$emit('change', active);
+
-        badges[this.currentActive].setActive(false);
+      if (currentActive !== active && badges[currentActive]) {
+        stack.push(badges[currentActive].setActive(false));
       }
 
       if (badges[active]) {
-        badges[active].setActive(true);
+        stack.push(badges[active].setActive(true));
-        this.currentActive = active;
       }
+
+      return Promise.all(stack);
     }
   }
 });

packages/badge/README.md

@@ -55,12 +55,11 @@ Page({
 |-----------|-----------|-----------|-------------|
 | active | 选中`badge`的索引 | `String | Number` | `0` |
 
-### Badge API
+### BadgeGroup Event
 
-| 参数 | 说明 | 类型 | 默认值 |
+| 事件名 | 说明 | 参数 |
-|-----------|-----------|-----------|-------------|
+|------|------|------|
-| title | 内容 | `String` | `''` |
+| change | 切换徽章时触发 | 当前选中徽章的索引 |
-| info | 提示消息 | `String | Number` | `''` |
 
 ### BadgeGroup 外部样式类
 
@@ -68,15 +67,21 @@ Page({
 |-----------|-----------|
 | custom-class | 根节点样式类 |
 
+### Badge API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| title | 内容 | `String` | `''` |
+| info | 提示消息 | `String | Number` | `''` |
+
+### Badge Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| click | 点击徽章时触发 | 当前徽章的索引 |
+
 ### Badge 外部样式类
 
 | 类名 | 说明 |
 |-----------|-----------|
 | custom-class | 根节点样式类 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.0.1 | feature | 新增组件 |
-| 0.3.2 | bugfix | 修复 active 属性不生效的问题 |

packages/badge/index.ts

@@ -3,7 +3,10 @@ import { VantComponent } from '../common/component';
 VantComponent({
   relation: {
     type: 'ancestor',
-    name: 'badge-group'
+    name: 'badge-group',
+    linked(target: Weapp.Component) {
+      this.parent = target;
+    }
   },
 
   props: {
@@ -13,14 +16,22 @@ VantComponent({
 
   methods: {
     onClick() {
-      const group = this.getRelationNodes('../badge-group/index')[0];
+      const { parent } = this;
-      if (group) {
+
-        group.setActive(this);
+      if (!parent) {
+        return;
       }
+
+      const index = parent.badges.indexOf(this);
+
+      parent.setActive(index).then(() => {
+        this.$emit('click', index);
+        parent.$emit('change', index);
+      });
     },
 
     setActive(active: boolean) {
-      this.set({ active });
+      return this.set({ active });
     }
   }
 });