From 784e9fb705f418581f215f9b74f04848da59e7ae Mon Sep 17 00:00:00 2001
From: luciy <407466029@qq.com>
Date: Fri, 12 May 2017 12:53:57 +0800
Subject: [PATCH] Dropdown: add visible-change event (#4818)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* dropdown 组件 新增触发下拉框显示隐藏时， 触发visible事件，传递当前下拉框显示状态

* Dropdown 修改事件名称，新增文档

* Dropdown 统一事件名称，修改文档

* Dropdown 统一事件名称，修改文档
---
 examples/docs/en-US/dropdown.md    | 9 +++------
 examples/docs/zh-CN/dropdown.md    | 1 +
 packages/dropdown/src/dropdown.vue | 1 +
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 25d4bdd86..7cd32d5b5 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -10,11 +10,11 @@
     }
   }
 </script>
-## Dropdown 
+## Dropdown
 Toggleable menu for displaying lists of links and actions.
 
 ### Basic usage
-Hover on the dropdown menu to unfold it for more actions. 
+Hover on the dropdown menu to unfold it for more actions.
 
 :::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it.
 
@@ -176,6 +176,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 |---------- |-------- |---------- |
 | click | if `split-button` is `true`, triggers when left button is clicked | — |
 | command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
+| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
 
 ### Dropdown Menu Item Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -183,7 +184,3 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 | command       | a command to be dispatched to Dropdown's `command` callback | string  |          —             |    —     |
 | disabled      | whether the item is disabled  | boolean  |          —             |    false     |
 | divided       | whether a divider is displayed  | boolean  |          —             |    false     |
-
-
-
-
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index de87ae60e..d367862e4 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -216,6 +216,7 @@
 |---------- |-------- |---------- |
 | click  | `split-button` 为 true 时，点击左侧按钮的回调 | — |
 | command  | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
+| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
 
 ### Dropdown Menu Item Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index aa4fd4e0d..8cab6e4ff 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -51,6 +51,7 @@
     watch: {
       visible(val) {
         this.broadcast('ElDropdownMenu', 'visible', val);
+        this.$emit('visible-change', val);
       }
     },