Dropdown: add visible-change event (#4818)

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

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

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

* Dropdown 统一事件名称,修改文档
pull/4986/head^2
luciy 2017-05-12 12:53:57 +08:00 committed by 杨奕
parent 25ffb284a1
commit 784e9fb705
3 changed files with 5 additions and 6 deletions

View File

@ -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 |

View File

@ -216,6 +216,7 @@
|---------- |-------- |---------- |
| click | `split-button` 为 true 时,点击左侧按钮的回调 | — |
| command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true隐藏则为 false |
### Dropdown Menu Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

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