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" 避免悬停失效问题。