elementui dropdown
ElementUI Dropdown 基础用法
ElementUI 的 Dropdown 组件用于创建下拉菜单，常用于导航或操作选项的折叠展示。以下是一个基础示例：
<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="a">选项A</el-dropdown-item>
<el-dropdown-item command="b">选项B</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<script>
methods: {
handleCommand(command) {
console.log('选中命令:', command);
}
}
</script>分割线与禁用状态
下拉菜单支持添加分割线和禁用特定选项：
<el-dropdown-menu>
<el-dropdown-item>正常选项</el-dropdown-item>
<el-dropdown-item disabled>禁用选项</el-dropdown-item>
<el-dropdown-item divided>带分割线的选项</el-dropdown-item>
</el-dropdown-menu>下拉按钮组合
结合 Button 组件创建下拉按钮组：
<el-dropdown split-button type="primary" @click="handleClick" @command="handleCommand">
下拉菜单
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="add">新增</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>尺寸控制
Dropdown 支持与 ElementUI 统一的尺寸体系，通过 size 属性设置：
mediumsmallmini
<el-dropdown size="small">
<!-- 内容 -->
</el-dropdown>自定义弹出位置
使用 placement 属性控制菜单弹出方向，可选值包括：
toptop-starttop-endbottombottom-startbottom-end
<el-dropdown placement="top-start">
<!-- 内容 -->
</el-dropdown>动态渲染菜单项
结合 v-for 实现动态菜单项渲染：
<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 v-for="item in menuItems" :key="item.value" :command="item.value">
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<script>
data() {
return {
menuItems: [
{ value: 'edit', label: '编辑' },
{ value: 'save', label: '保存' }
]
}
}
</script>多级嵌套菜单
通过嵌套 el-dropdown 实现多级菜单：
<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>一级菜单</el-dropdown-item>
<el-dropdown placement="right-start">
<el-dropdown-item>
二级菜单<i class="el-icon-arrow-right el-icon--right"></i>
</el-dropdown-item>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>二级选项1</el-dropdown-item>
<el-dropdown-item>二级选项2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-menu>
</el-dropdown>样式自定义
通过 CSS 覆盖默认样式：
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-dropdown-menu {
min-width: 120px;
}以上示例涵盖了 ElementUI Dropdown 组件的核心功能，可根据实际需求进行组合和扩展。
