elementui dropdown
ElementUI Dropdown 基础用法
ElementUI 的 Dropdown 组件用于创建下拉菜单，通常与按钮或导航结合使用。
基本结构
通过 el-dropdown 包裹触发元素（如按钮）和下拉菜单内容（el-dropdown-menu）。
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>选项1</el-dropdown-item>
<el-dropdown-item>选项2</el-dropdown-item>
<el-dropdown-item>选项3</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>触发方式
Dropdown 支持多种触发方式，通过 trigger 属性配置：
hover（默认）：鼠标悬停触发。click：点击触发。contextmenu：右键点击触发。
<el-dropdown trigger="click">
<!-- 内容同上 -->
</el-dropdown>下拉菜单项事件
为菜单项绑定点击事件，通过 command 属性传递值：
<el-dropdown @command="handleCommand">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="save">保存</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>methods: {
handleCommand(command) {
if (command === 'save') {
// 处理保存逻辑
} else if (command === 'delete') {
// 处理删除逻辑
}
}
}分割线与禁用项
通过 divided 和 disabled 属性实现分割线和禁用效果：
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>正常选项</el-dropdown-item>
<el-dropdown-item divided>分割线下方</el-dropdown-item>
<el-dropdown-item disabled>禁用选项</el-dropdown-item>
</el-dropdown-menu>下拉菜单方向
通过 placement 属性调整下拉方向，支持 top、bottom、left、right 等：
<el-dropdown placement="top">
<!-- 内容同上 -->
</el-dropdown>按钮下拉菜单
结合 el-button 实现更直观的触发：
<el-dropdown>
<el-button type="primary">
功能菜单<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>功能1</el-dropdown-item>
<el-dropdown-item>功能2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>自定义下拉内容
Dropdown 支持自定义内容，如下拉表单或复杂布局：
<el-dropdown>
<el-button type="text">自定义下拉</el-button>
<el-dropdown-menu slot="dropdown">
<div style="padding: 10px;">
<el-input placeholder="搜索"></el-input>
<el-checkbox>选项A</el-checkbox>
</div>
</el-dropdown-menu>
</el-dropdown>注意事项
- 下拉菜单默认依赖 Popper.js 进行定位，需确保 ElementUI 版本兼容。
- 若下拉菜单在滚动容器内，需监听滚动事件并调用
updatePopper方法更新位置。 - 移动端建议使用
trigger="click"避免悬停失效问题。
