[improvement] Badge: add change event (#2017)

packages/badge-group/index.vue

@@ -17,6 +17,12 @@ export default create({
     }
   },
 
+  provide() {
+    return {
+      vanBadgeGroup: this
+    };
+  },
+
   data() {
     return {
       badges: []

packages/badge/demo/index.vue

@@ -1,11 +1,11 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-badge-group :active-key="activeKey">
+      <van-badge-group :active-key="activeKey" @change="onChange">
-        <van-badge :title="$t('title')" @click="onClick" />
+        <van-badge :title="$t('title')" />
-        <van-badge :title="$t('title')" @click="onClick" info="8" />
+        <van-badge :title="$t('title')" info="8" />
-        <van-badge :title="$t('title')" @click="onClick" info="99" />
+        <van-badge :title="$t('title')" info="99" />
-        <van-badge :title="$t('title')" @click="onClick" info="199" />
+        <van-badge :title="$t('title')" info="199" />
       </van-badge-group>
     </demo-block>
   </demo-section>
@@ -26,7 +26,7 @@ export default {
   },
 
   methods: {
-    onClick(key) {
+    onChange(key) {
       this.activeKey = key;
     }
   }

packages/badge/en-US.md

@@ -14,11 +14,11 @@ Vue.use(BadgeGroup);
 Use `active-key` prop to set index of chosen 'badge'
 
 ```html
-<van-badge-group :active-key="activeKey">
+<van-badge-group :active-key="activeKey" @change="onChange">
-  <van-badge title="Title" @click="onClick" />
+  <van-badge title="Title" />
-  <van-badge title="Title" @click="onClick" info="8" />
+  <van-badge title="Title" info="8" />
-  <van-badge title="Title" @click="onClick" info="99" />
+  <van-badge title="Title" info="99" />
-  <van-badge title="Title" @click="onClick" info="199" />
+  <van-badge title="Title" info="199" />
 </van-badge-group>
 ```
 
@@ -29,8 +29,9 @@ export default {
       activeKey: 0
     };
   },
+
   methods: {
-    onClick(key) {
+    onChange(key) {
       this.activeKey = key;
     }
   }
@@ -43,9 +44,22 @@ export default {
 |------|------|------|------|
 | active-key | Index of chosen badge | `String | Number` | `0` |
 
+### BadgeGroup Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| change | Triggered when badge changed | key: index of current badge |
+
 ### Badge API
+
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | title | Content | `String` | `''` |
 | info | Info Message | `String | Number` | `''` |
 | url | Link | `String` | - |
+
+### Badge Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when click badge | key: index of current badge |

packages/badge/index.vue

@@ -26,19 +26,36 @@ export default create({
     title: String
   },
 
-  beforeCreate() {
+  inject: ['vanBadgeGroup'],
-    this.$parent.badges.push(this);
+
+  created() {
+    this.parent.badges.push(this);
+  },
+
+  beforeDestroy() {
+    this.parent.badges = this.parent.badges.filter(item => item !== this);
   },
 
   computed: {
+    parent() {
+      if (process.env.NODE_ENV !== 'production' && !this.vanBadgeGroup) {
+        console.error('[Vant] Badge needs to be child of BadgeGroup');
+      }
+      return this.vanBadgeGroup;
+    },
+
     select() {
-      return this.$parent.badges.indexOf(this) === this.$parent.activeKey;
+      return (
+        this.parent.badges.indexOf(this) === +this.parent.activeKey
+      );
     }
   },
 
   methods: {
     onClick() {
-      this.$emit('click', this.$parent.badges.indexOf(this));
+      const index = this.parent.badges.indexOf(this);
+      this.$emit('click', index);
+      this.parent.$emit('change', index);
     }
   }
 });

packages/badge/test/index.spec.js

@@ -2,11 +2,12 @@ import { mount } from '../../../test/utils';
 import Badge from '../';
 import BadgeGroup from '../../badge-group';
 
-test('click', () => {
+test('event', () => {
   const onClick = jest.fn();
+  const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <badge-group>
+      <badge-group @change="onChange">
         <badge @click="onClick">Text</badge>
       </badge-group>
     `,
@@ -15,10 +16,24 @@ test('click', () => {
       BadgeGroup
     },
     methods: {
-      onClick
+      onClick,
+      onChange
     }
   });
 
   wrapper.find('.van-badge').trigger('click');
   expect(onClick.mock.calls[0][0]).toBe(0);
+  expect(onChange.mock.calls[0][0]).toBe(0);
+  wrapper.vm.$destroy();
+});
+
+test('without parent', () => {
+  const consoleError = console.error;
+  try {
+    console.error = jest.fn();
+    mount(Badge);
+  } catch (err) {
+    console.error = consoleError;
+    expect(err).toBeTruthy();
+  }
 });

packages/badge/zh-CN.md

@@ -15,11 +15,11 @@ Vue.use(BadgeGroup);
 通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
 
 ```html
-<van-badge-group :active-key="activeKey">
+<van-badge-group :active-key="activeKey" @change="onChange">
-  <van-badge title="标签名称" @click="onClick" />
+  <van-badge title="标签名称" />
-  <van-badge title="标签名称" @click="onClick" info="8" />
+  <van-badge title="标签名称" info="8" />
-  <van-badge title="标签名称" @click="onClick" info="99" />
+  <van-badge title="标签名称" info="99" />
-  <van-badge title="标签名称" @click="onClick" info="199" />
+  <van-badge title="标签名称" info="199" />
 </van-badge-group>
 ```
 
@@ -30,8 +30,9 @@ export default {
       activeKey: 0
     };
   },
+
   methods: {
-    onClick(key) {
+    onChange(key) {
       this.activeKey = key;
     }
   }
@@ -44,6 +45,12 @@ export default {
 |------|------|------|------|------|
 | active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
 
+### BadgeGroup Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| change | 切换徽章时触发 | key: 当前选中徽章的索引 |
+
 ### Badge API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -51,3 +58,9 @@ export default {
 | title | 内容 | `String` | `''` | - |
 | info | 提示消息 | `String | Number` | `''` | - |
 | url | 跳转链接 | `String` | - | - |
+
+### Badge Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| click | 点击徽章时触发 | key: 当前徽章的索引 |

packages/mixins/i18n.js

@@ -9,7 +9,7 @@ export default {
 
       if (!this.$vantMessages) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn('[Vant] Locale not correctly registered.');
+          console.error('[Vant] Locale not correctly registered');
         }
         return () => '';
       }

packages/waterfall/index.js

@@ -2,7 +2,7 @@ import Waterfall from './directive.js';
 
 Waterfall.install = function(Vue) {
   if (process.env.NODE_ENV !== 'production') {
-    console.warn('[Vant warn] Waterfall is deprecated, please use List component instread.');
+    console.warn('[Vant] Waterfall is deprecated, please use List component instread');
   }
   Vue.directive('WaterfallLower', Waterfall('lower'));
   Vue.directive('WaterfallUpper', Waterfall('upper'));