# dropdown (w-dropdown)

- **Import**: `WDropdown` from `win-design-next`
- **Tag**: `<w-dropdown>`
- **说明**: Dropdown 下拉菜单
- **分类**: navigation
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/dropdown.md`

## API

## Dropdown API

### Attributes

| 属性名         | 说明                                                                                                     | 类型                                                                                                                    | Default                                                                    |
| -------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| type           | 菜单按钮类型，同 `Button` 组件一样，仅在 `split-button` 为 true 的情况下有效。                           | ^[enum]`'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'error' \| 'text' (deprecated)` | ''                                                                         |
| size           | 菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效。                                             | ^[enum]`'' \| 'large' \| 'default' \| 'small'`                                                                          | ''                                                                         |
| button-props   | 按钮组件的 props，参考 [按钮属性](./button.html#button-attributes)                                       | ^[object]                                                                                                               | —                                                                          |
| max-height     | 菜单最大高度                                                                                             | ^[string] / ^[number]                                                                                                   | ''                                                                         |
| split-button   | 下拉触发元素呈现为按钮组                                                                                 | ^[boolean]                                                                                                              | false                                                                      |
| disabled       | 是否禁用                                                                                                 | ^[boolean]                                                                                                              | false                                                                      |
| placement      | 菜单弹出位置                                                                                             | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`                                | bottom                                                                     |
| effect         | Tooltip 主题，内置了: `dark` / `lighter`                                                                 | ^[enum]`'dark' \| 'light'` / ^[string]                                                                                  | lighter                                                                    |
| trigger        | 触发下拉的行为                                                                                           | ^[enum]`'hover' \| 'click' \| 'contextmenu'`                                                                            | hover                                                                      |
| triggerKeys    | 指定键盘上哪些按键可以触发操作                                                                           | ^[array]`string[]`                                                                                                      | `['Enter', 'Space', 'ArrowDown', 'NumpadEnter']`                           |
| hide-on-click  | 是否在点击菜单项后隐藏菜单                                                                               | ^[boolean]                                                                                                              | true                                                                       |
| show-timeout   | 展开下拉菜单的延时，仅在 trigger 为 hover 时有效                                                         | ^[number]                                                                                                               | 150                                                                        |
| hide-timeout   | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）                                                       | ^[number]                                                                                                               | 150                                                                        |
| role           | 下拉菜单的 ARIA 属性。 根据具体场景，您可能想要将此更改为“navigation”                                    | ^[enum]`'dialog' \| 'grid' \| 'group' \| 'listbox' \| 'menu' \| 'navigation' \| 'tooltip' \| 'tree'`                    | menu                                                                       |
| tabindex       | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | ^[number] / ^[string]                                                                                                   | 0                                                                          |
| popper-class   | 自定义浮层类名                                                                                           | ^[string]                                                                                                               | ''                                                                         |
| popper-options | [popper.js](https://popper.js.org/docs/v2/) 参数                                                         | ^[object]                                                                                                               | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
| teleported     | 是否将下拉列表插入至 body 元素                                                                           | ^[boolean]                                                                                                              | true                                                                       |
| persistent     | 当下拉菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁                                      | ^[boolean]                                                                                                              | true                                                                       |

### Slots

| 插槽名   | 说明                                                                                                | 子标签        |
| -------- | --------------------------------------------------------------------------------------------------- | ------------- |
| default  | 下拉菜单的内容。 注意：必须是有效的 html DOM 元素（例如 `、` 等）或 `w-component`，以附加监听触发器 | —             |
| dropdown | 下拉列表，通常是 `` 组件                                                                            | Dropdown-Menu |

### Events

| 事件名         | 说明                                                                       | 类型                                  |
| -------------- | -------------------------------------------------------------------------- | ------------------------------------- |
| click          | `split-button` 为 true 时，点击左侧按钮的回调                              | ^[Function]`(e: MouseEvent) => void`  |
| command        | 当下拉项被点击时触发，参数是从下拉菜单中发送的命令                         | ^[Function]`(...args: any[]) => void` |
| visible-change | 当下拉菜单出现/消失时触发器, 当它出现时, 参数将是 `true`, 否则将是 `false` | ^[Function]`(val: boolean) => void`   |

### Exposes

| 方法名      | 说明         | Type                    |
| ----------- | ------------ | ----------------------- |
| handleOpen  | 打开下拉菜单 | ^[Function]`() => void` |
| handleClose | 关闭下拉菜单 | ^[Function]`() => void` |
