瀏覽代碼

Dropdown: add visible-change event (#4818)

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

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

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

* Dropdown 统一事件名称,修改文档
luciy 8 年之前
父節點
當前提交
784e9fb705
共有 3 個文件被更改,包括 5 次插入6 次删除
  1. 3 6
      examples/docs/en-US/dropdown.md
  2. 1 0
      examples/docs/zh-CN/dropdown.md
  3. 1 0
      packages/dropdown/src/dropdown.vue

+ 3 - 6
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     |
-
-
-
-

+ 1 - 0
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
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |

+ 1 - 0
packages/dropdown/src/dropdown.vue

@@ -51,6 +51,7 @@
     watch: {
       visible(val) {
         this.broadcast('ElDropdownMenu', 'visible', val);
+        this.$emit('visible-change', val);
       }
     },