## Dropdown 下拉菜单 将动作或菜单折叠到下拉菜单中。 ### 基础用法 移动到下拉菜单上，展开更多操作。 :::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。 ```html 选项一 选项二 选项三 选项四 ``` ::: ### 不带独立按钮的下拉菜单 :::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。 ```html 选项一 选项二 选项三 选项四 ``` ::: ### 通过点击触发下拉 :::demo 在`trigger`属性设置为`click`即可。 ```html 选项一 选项二 选项三 选项四 选项一 选项二 选项三 选项四 ``` ::: ### 按钮样式 除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能： :::demo ```html 选项一 选项二 选项三

选项四 ``` ::: :::demo ```html 选项一 选项二 选项三

选项四 选项一 选项二 选项三 选项四 选项一 选项二 选项三 选项四 选项一 选项二 选项三 选项四 ``` ::: ### 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 |