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

2025-04-06 03:57:59 +08:00 · 2018-11-02 14:19:39 +08:00 · 2018-11-02 14:19:39 +08:00 · fc8937aa26
commit fc8937aa26
parent 42f985cd7b
8 changed files with 92 additions and 27 deletions
--- a/packages/badge-group/index.vue
+++ b/packages/badge-group/index.vue
@ -17,6 +17,12 @@ export default create({
    }
  },

+  provide() {
+    return {
+      vanBadgeGroup: this
+    };
+  },
+
  data() {
    return {
      badges: []
--- a/packages/badge/demo/index.vue
+++ b/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 :title="$t('title')" @click="onClick" />
-        <van-badge :title="$t('title')" @click="onClick" info="8" />
-        <van-badge :title="$t('title')" @click="onClick" info="99" />
-        <van-badge :title="$t('title')" @click="onClick" info="199" />
+      <van-badge-group :active-key="activeKey" @change="onChange">
+        <van-badge :title="$t('title')" />
+        <van-badge :title="$t('title')" info="8" />
+        <van-badge :title="$t('title')" info="99" />
+        <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;
    }
  }
--- a/packages/badge/en-US.md
+++ b/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 title="Title" @click="onClick" />
-  <van-badge title="Title" @click="onClick" info="8" />
-  <van-badge title="Title" @click="onClick" info="99" />
-  <van-badge title="Title" @click="onClick" info="199" />
+<van-badge-group :active-key="activeKey" @change="onChange">
+  <van-badge title="Title" />
+  <van-badge title="Title" info="8" />
+  <van-badge title="Title" info="99" />
+  <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 |
--- a/packages/badge/index.vue
+++ b/packages/badge/index.vue
@ -26,19 +26,36 @@ export default create({
    title: String
  },

-  beforeCreate() {
-    this.$parent.badges.push(this);
+  inject: ['vanBadgeGroup'],
+
+  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);
    }
  }
 });
--- a/packages/badge/test/index.spec.js
+++ b/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();
+  }
 });
--- a/packages/badge/zh-CN.md
+++ b/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 title="标签名称" @click="onClick" />
-  <van-badge title="标签名称" @click="onClick" info="8" />
-  <van-badge title="标签名称" @click="onClick" info="99" />
-  <van-badge title="标签名称" @click="onClick" info="199" />
+<van-badge-group :active-key="activeKey" @change="onChange">
+  <van-badge title="标签名称" />
+  <van-badge title="标签名称" info="8" />
+  <van-badge title="标签名称" info="99" />
+  <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: 当前徽章的索引 |
--- a/packages/mixins/i18n.js
+++ b/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 () => '';
      }
--- a/packages/waterfall/index.js
+++ b/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'));