037_Dropdown下拉菜单

Element UI下拉菜单Dropdown详解及实例

最新推荐文章于 2025-10-13 05:31:53 发布

原创最新推荐文章于 2025-10-13 05:31:53 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了Element UI的Dropdown组件，包括其属性、插槽、事件和菜单项属性。通过示例展示了基础用法、按钮触发、触发方式、菜单隐藏方式、指令事件和不同尺寸的Dropdown菜单，帮助开发者灵活运用Dropdown组件。

1. Dropdown下拉菜单

1.1. Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。

1.2. Dropdown Attributes

参数	说明	类型	可选值	默认值
type	菜单按钮类型, 同Button组件(只在split-button为true的情况下有效)	string	无	无
size	菜单尺寸, 在split-button为true的情况下也对触发按钮生效	string	medium / small / mini	无
split-button	下拉触发元素呈现为按钮组	boolean	无	false
placement	菜单弹出位置	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom-end
trigger	触发下拉的行为	string	hover, click	hover
hide-on-click	是否在点击菜单项后隐藏菜单	boolean	无	true
show-timeout	展开下拉菜单的延时(仅在trigger为hover时有效)	boolean	无	250
hide-timeout	收起下拉菜单的延时(仅在trigger为hover时有效)	boolean	无	150
tabindex	Dropdown组件的tabindex	boolean	无	0
disabled	是否禁用	boolean	无	false

1.3. Dropdown Slots

Name	说明
—	触发下拉列表显示的元素。注意: 必须是一个元素或者或者组件
dropdown	下拉列表, 通常是<el-dropdown-menu>组件

1.4. Dropdown Events

事件名称	说明	回调参数
click	split-button为true时, 点击左侧按钮的回调	无
command	点击菜单项触发的事件回调	dropdown-item的指令
visible-change	下拉框出现/隐藏时触发	出现则为true, 隐藏则为false

1.5. Dropdown Menu Item Attributes

参数	说明	类型	默认值
command	指令	string/number/object	无
disabled	禁用	boolean	false
divided	显示分割线	boolean	false
icon	图标类名	string	无

2. Dropdown下拉菜单例子

2.1. 使用脚手架新建一个名为element-ui-dropdown的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dropdown from '../components/Dropdown.vue'
import ButtonDropdown from '../components/ButtonDropdown.vue'
import ClickDropdown from '../components/ClickDropdown.vue'
import HideClickDropdown from '../components/HideClickDropdown.vue'
import CommandDropdown from '../components/CommandDropdown.vue'
import SizeDropdown from '../components/SizeDropdown.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Dropdown' },
  { path: '/Dropdown', component: Dropdown },
  { path: '/ButtonDropdown', component: ButtonDropdown },
  { path: '/ClickDropdown', component: ClickDropdown },
  { path: '/HideClickDropdown', component: HideClickDropdown },
  { path: '/CommandDropdown', component: CommandDropdown },
  { path: '/SizeDropdown', component: SizeDropdown }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Dropdown.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown来设置下拉菜单。默认情况下, 下拉按钮只要hover即可, 无需点击也会显示下拉菜单。</h4>
    <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-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

2.4. 在components下创建ButtonDropdown.vue

<template>
  <div>
    <h1>触发对象-可使用按钮触发下拉菜单</h1>
    <h4>设置split-button属性来让触发下拉元素呈现为按钮组, 左边是功能按钮, 右边是触发下拉菜单的按钮, 设置为true即可。</h4>
    <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>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown split-button type="primary" @click="handleClick">
      更多菜单
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style scoped>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
export default {
  methods: {
    handleClick () {
      alert('button click')
    }
  }
}
</script>

2.5. 在components下创建ClickDropdown.vue

<template>
  <div>
    <h1>触发方式</h1>
    <h4>可以配置click激活或者hover激活。在trigger属性设置为click即可。</h4>
    <el-row>
      <el-col :span="4">
        <span class="demonstration">hover 激活</span>
        <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 icon="el-icon-plus">黄金糕</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <span class="demonstration">click 激活</span>
        <el-dropdown trigger="click"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

2.6. 在components下创建HideClickDropdown.vue

<template>
  <div>
    <h1>菜单隐藏方式</h1>
    <h4>下拉菜单默认在点击菜单项后会被隐藏, 将hide-on-click属性默认为false可以关闭此功能。</h4>
    <el-dropdown :hide-on-click="false">
      <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-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

2.7. 在components下创建CommandDropdown.vue

<template>
  <div>
    <h1>指令事件</h1>
    <h4>点击菜单项后会触发事件, 用户可以通过相应的菜单项key进行不同的操作。</h4>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">黄金糕</el-dropdown-item>
        <el-dropdown-item command="b">狮子头</el-dropdown-item>
        <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
        <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
export default {
  methods: {
    handleCommand (command) {
      this.$message('click on item ' + command)
    }
  }
}
</script>

2.8. 在components下创建SizeDropdown.vue

<template>
  <div>
    <h1>不同尺寸</h1>
    <h4>Dropdown组件提供除了默认值以外的三种尺寸, 可以在不同场景下选择合适的尺寸。额外的尺寸: medium、small、mini, 通过设置size属性来配置它们。</h4>
    <el-dropdown split-button type="primary">
      默认尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown size="medium" split-button type="primary">
      中等尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown size="small" split-button type="primary">
      小型尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown size="mini" split-button type="primary">
      超小尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style scoped>
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

2.9. 运行项目, 访问http://localhost:8080/#/Dropdown