用途:el-dropdown 是 Element Plus 提供的下拉菜单组件,用于展示可切换的链接与操作列表,适合导航菜单、操作菜单、上下文(右键)菜单以及分裂按钮操作等场景。
主要能力:支持通过 trigger 属性设置触发方式(click、hover、contextmenu,默认 hover);支持 split-button 分裂按钮模式,配合 click 事件处理主操作;支持 size(large/default/small)、type、placement、effect(dark/light)、max-height、disabled、hide-on-click、show-timeout、hide-timeout、teleported 等属性;通过 command 事件统一处理菜单项点击,菜单项 el-dropdown-item 支持 command、disabled、divided、icon 属性;组件暴露 handleOpen 与 handleClose 方法,并提供 visible-change 事件。
使用方式:在模板中使用 el-dropdown 包裹触发元素,并通过 #dropdown 插槽放置 el-dropdown-menu 与 el-dropdown-item。例如基础用法中触发元素为 span,菜单项为若干 el-dropdown-item;分裂按钮写法为 <el-dropdown split-button type="primary" @click="handleClick">;触发方式可写 trigger="click" 或 trigger="hover";命令事件写法为 @command="handleCommand",菜单项设置 command="a" 等值。图标可从 @element-plus/icons-vue 引入,如 ArrowDown。
适用场景:需要下拉操作列表的界面,如导航、批量操作、右键菜单、主次操作分离的分裂按钮。
限制与建议:资料未提供安装命令、版本要求、收费与平台信息,暂未提供。最佳实践包括:主操作配合下拉时使用 split-button;用 command 事件处理操作;多操作菜单设置 hide-on-click="false"。