# Dropdown 下拉菜单

按钮用于开始向下弹出的列表。

## 何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

### 基本

最简单的下拉菜单。

@[demo](./demo/basic.vue)

### 多级菜单

下拉菜单可以进行嵌套实现多级菜单，嵌套时注意展开的方向。

@[demo](./demo/nesting.vue)

### 带下拉框的按钮

左边是按钮，右边是额外的相关功能菜单。

@[demo](./demo/button.vue)

### 一个复杂的例子

支持左右结构，分割线，内置箭头，悬浮，选中, 激活，禁用状态等等

@[demo](./demo/complex.vue)

### dropdown props

| 参数        | 说明           | 类型    | 可选值              | 默认值                                       |
| ----------- | -------------- | ------- | ------------------- | -------------------------------------------- |
| hideOnClick | 点击时隐藏     | boolean | -                   | true                                         |
| placement   | 出现位置       | string  | placement           | button 模式时 bottom-end 否则为 bottom-start |
| button      | 是否为按钮模式 | Boolean | -                   | false                                        |
| size        | 设置按钮大小   | string  | small/medium/large  | medium                                       |
| type        | 设置按钮类型   | string  | primary/danger      | -                                            |
| native-type | 原生`type`属性 | string  | button/submit/reset | button                                       |
| icon        | 设置按钮 icon  | string  | -                   | —                                            |


### dropdown slots

| 插槽名 | 说明       |
| -------- | ---------- |
| show    | 显示菜单 |
| hide    | 关闭菜单 |

### dropdown events

| 事件名称 | 说明       | 回调参数            |
| -------- | ---------- | ------------------- |
| click    | 点击时事件 | (event, name, item) |

### dropdown-item props

| 参数        | 说明           | 类型          | 可选值 | 默认值 |
| ----------- | -------------- | ------------- | ------ | ------ |
| name        | 用于点击时区分 | string/number | -      | -      |
| disabled    | 禁止状态       | boolean       | -      | false  |
| selected    | 选中状态       | boolean       | -      | false  |
| divider     | 分割线         | boolean       | -      | false  |
| title       | 标题，类似分组 | string        | -      | -      |
| showArrow   | 是否显示箭头   | boolean       | -      | false  |
| hover       | 悬浮状态       | boolean       | -      | -      |
| hideOnClick | 点击时隐藏     | boolean       | -      | true   |

### dropdown-item events

| 事件名称 | 说明       | 回调参数            |
| -------- | ---------- | ------------------- |
| click    | 点击时事件 | (event, name, item) |

### dropdown-item methods

| 方法名称  | 说明         | 参数 |
| --------- | ------------ | -------- |
| setActive | 设置激活状态 | (flag)   |