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