[new feauture] DropdownItem: add change event

packages/dropdown-item/index.js

@@ -50,7 +50,11 @@ export default sfc({
           titleStyle={{ color: active ? activeColor : '' }}
           onClick={() => {
             this.show = false;
-            this.$emit('input', option.value);
+
+            if (option.value !== this.value) {
+              this.$emit('input', option.value);
+              this.$emit('change', option.value);
+            }
           }}
         >
           {active && <Icon class={bem('icon')} color={activeColor} name="success" />}

packages/dropdown-menu/en-US.md

@@ -93,6 +93,12 @@ export default {
 | title | Item title | `String` | Text of selected option |
 | options | Options | `Array` | `[]` |
 
+### DropdownItem Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| change | Triggered select option and value changed | value |
+
 ### DropdownItem Methods
 
 Use ref to get DropdownItem instance and call instance methods

packages/dropdown-menu/test/index.spec.js

@@ -98,3 +98,47 @@ test('destroy one item', async () => {
   wrapper.setData({ render: false });
   expect(wrapper).toMatchSnapshot();
 });
+
+
+test('change event', async () => {
+  const onChange = jest.fn();
+
+  const wrapper = mount({
+    template: `
+      <dropdown-menu>
+        <dropdown-item v-model="value" :options="options" @change="onChange" />
+        <dropdown-item v-model="value" :options="options" />
+      </dropdown-menu>
+    `,
+    components: {
+      DropdownItem,
+      DropdownMenu
+    },
+    data() {
+      return {
+        value: 0,
+        options: [
+          { text: 'A', value: 0 },
+          { text: 'B', value: 1 }
+        ]
+      };
+    },
+    methods: {
+      onChange
+    }
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  titles.at(0).trigger('click');
+
+  const options = wrapper.findAll('.van-dropdown-item .van-cell');
+  options.at(0).trigger('click');
+
+  expect(onChange).toHaveBeenCalledTimes(0);
+
+  options.at(1).trigger('click');
+  expect(onChange).toHaveBeenCalledWith(1);
+  expect(onChange).toHaveBeenCalledTimes(1);
+});

packages/dropdown-menu/zh-CN.md

@@ -95,6 +95,12 @@ export default {
 | title | 菜单项标题 | `String` | 当前选中项文字 | - |
 | options | 选项数组 | `Array` | `[]` | - |
 
+### DropdownItem Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| change | 点击选项导致 value 变化时触发 | value |
+
 ### DropdownItem 方法
 
 通过 ref 可以获取到 DropdownItem 实例并调用实例方法