## Dropdown 下拉菜单 将动作或菜单折叠到下拉菜单中。 ### 基础用法 移动到下拉菜单上,展开更多操作。 :::demo 通过`text`属性来设置按钮文字。默认条件下,他由一个主要按钮和一个下拉按钮组成,`el-dropdown`中的主要按钮同样可以设置点击事件,只要使用`mainclick`事件即可。默认情况下,下拉按钮只要`hover`即可,无需点击也会显示下拉菜单。 ```html 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 ``` ::: ### 触发对象 可使用按钮触发下拉菜单。 :::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单,设置为`false`即可。在选项三和选项四中插入了一条分割线,只需要在选项四中设置`class`为`divider`。 ```html 更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 更多菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 ``` ::: ### 触发方式 可以配置 click 激活或者 hover 激活。 :::demo 在`trigger`属性设置为`click`即可。 ```html hover 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 click 激活 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 ``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | | type | 菜单按钮类型,同 Button 组件 | string | — | — | | split-button | 带下拉框的按钮 | boolean | — | false | | menu-align | 菜单水平对齐方向 | string | start, end | end | | trigger | 触发下拉的行为 | string | hover, click | hover | ### Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | click | `split-button` 为 true 时,点击左侧按钮的回调 | — |