From e9854daf29009da7a9be95d19afffdb982a80047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 7 May 2019 20:56:23 +0800
Subject: [PATCH] [new feauture] DropdownItem: add change event

---
 packages/dropdown-item/index.js           |  6 +++-
 packages/dropdown-menu/en-US.md           |  6 ++++
 packages/dropdown-menu/test/index.spec.js | 44 +++++++++++++++++++++++
 packages/dropdown-menu/zh-CN.md           |  6 ++++
 4 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/dropdown-item/index.js b/packages/dropdown-item/index.js
index 6885360ab..1acae1ceb 100644
--- a/packages/dropdown-item/index.js
+++ b/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" />}
diff --git a/packages/dropdown-menu/en-US.md b/packages/dropdown-menu/en-US.md
index 433a3234b..486d714f6 100644
--- a/packages/dropdown-menu/en-US.md
+++ b/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
diff --git a/packages/dropdown-menu/test/index.spec.js b/packages/dropdown-menu/test/index.spec.js
index 9a517478b..a195d44a6 100644
--- a/packages/dropdown-menu/test/index.spec.js
+++ b/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);
+});
diff --git a/packages/dropdown-menu/zh-CN.md b/packages/dropdown-menu/zh-CN.md
index 8e0da726d..b97c4d4f7 100644
--- a/packages/dropdown-menu/zh-CN.md
+++ b/packages/dropdown-menu/zh-CN.md
@@ -95,6 +95,12 @@ export default {
 | title | 菜单项标题 | `String` | 当前选中项文字 | - |
 | options | 选项数组 | `Array` | `[]` | - |
 
+### DropdownItem Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| change | 点击选项导致 value 变化时触发 | value |
+
 ### DropdownItem 方法
 
 通过 ref 可以获取到 DropdownItem 实例并调用实例方法