您的位置：58编程 > elementui下拉菜单 ElementPlus Dropdown 下拉菜单

elementui下拉菜单 ElementPlus Dropdown 下拉菜单

2023-03-13 17:33

elementui下拉菜单

ElementUI 下拉菜单是一种常用的交互形式，它可以帮助用户快速地从一组选项中进行选择。ElementUI 下拉菜单的使用非常简单，只需要在 HTML 文件中引入 ElementUI 的相关文件，然后在 Vue 组件中使用 el-select 组件即可。

<el-select v-model="value" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

上面的代码中，我们使用 el-select 标签来创建一个下拉菜单，并使用 v-model 属性来将其值绑定到 value 变量上。然后我们使用 el-option 标签来创建多个选项，并将它们的 label 和 value 属性分别绑定到 options 数组中的 label 和 value 属性上。

ElementUI 下拉菜单还有很多高级功能，例如可以设置多选、过滤、加载数据、加载前显示 loading 状态、显示图标、显示快捷键、显示 placeholder 等。此外，ElementUI 还支持对下拉菜单进行样式定制，例如可以修改字体大小、字体颜色、背景颜色、图标大小和位置、文本对齐方式和间隔大小。

ElementPlus Dropdown 下拉菜单

Dropdown 下拉菜单

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

基础用法

移动到下拉菜单上，展开更多操作。

通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。

<template>
  <el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

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

触发对象

可使用按钮触发下拉菜单。

设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。

<template>
  <el-dropdown>
  <el-button type="primary">
    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
  更多菜单
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert("button click")
      },
    },
  }
</script>
<style>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

触发方式

可以配置 click 激活或者 hover 激活。

在trigger属性设置为click即可。

<template>
  <el-row class="block-col-2">
  <el-col :span="8">
    <span class="demonstration">hover 激活</span>
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <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>
      </template>
    </el-dropdown>
  </el-col>
  <el-col :span="8">
    <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>
      <template #dropdown>
        <el-dropdown-menu>
          <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>
      </template>
    </el-dropdown>
  </el-col>
  <el-col :span="8">
    <span class="demonstration">右键(contextmenu) 激活</span>
    <el-dropdown trigger="contextmenu">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <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>
      </template>
    </el-dropdown>
  </el-col>
</el-row>
</template>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

菜单隐藏方式

可以hide-on-click属性来配置。

下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。

<template>
  <el-dropdown :hide-on-click="false">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

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

指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作

<template>
  <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message("click on item " + command)
      },
    },
  }
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

不同尺寸

Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。

额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

<template>
  <el-dropdown split-button type="primary">
  默认尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>

<el-dropdown size="medium" split-button type="primary">
  中等尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>

<el-dropdown size="small" split-button type="primary">
  小型尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>

<el-dropdown size="mini" split-button type="primary">
  超小尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

Dropdown Attributes

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

Dropdown Slots

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

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

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

阅读全文

以上是58编程为你收集整理的elementui下拉菜单 ElementPlus Dropdown 下拉菜单全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

全部标签 标签详情

element plus安装 ElementPlus 安装

04-20

环境支持现代浏览器边缘最后 2 个版本最后 2 个版本最后 2 个版本由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及...
bootstrap4模态框嵌套 Bootstrap4 模态框

bootstrap4教程

模态框（Modal）是覆盖在父窗体上的子窗体。通常，使用模态框的目的是用来显示来自一个单独的源的内容，而且可以在不离开父窗体...
Axios 尾篇

Axios中文文档

Promiseaxios 依赖原生的 ES6 Promise 实现而被支持，如果你的环境不支持 ES6 Promise，可以使用 polyfill。TypeScriptaxios 包...
echarts属性设置大全 ECharts自定义系列属性

ECharts教程

ECharts自定义系列属性在上一节的内容中，我们初步认识了ECharts自定义系列，而本节的内容是介绍ECharts自定义系列属性。type在E...
highcharts update Highcharts 环境配置

Highcharts教程

Highcharts 环境配置本章节我们将为大家介绍如何在网页中使用 Highcharts。 Highcharts 依赖于 jQuery，所以在加载 Highcharts ...
highcharts散点网格线 Highcharts 散点

Highcharts教程

Highcharts 散点图本章节我们将为大家介绍 Highcharts 的散点图。我们在前面的章节已经了解了 Highcharts 配置语法。接下来让...
angularjs控制器与作用域的关系 AngularJS 控制器

AngularJS教程

AngularJS 控制器 AngularJS控制器在div内由ng-controller 指令定义。AngularJS 控制器控制 AngularJS 应用程序的数据。 Angula...
angularjs module AngularJS 模板链接和像

AngularJS教程

模板连接和图像在这一步中，你将为手机列表中的手机添加一个缩略图，并链接到想去的地方。在后续的步骤中，你将使用这个链接显示...
解释angularjs中的服务是什么 AngularJS 服务(Service)

AngularJS教程

AngularJS 服务(Service)AngularJS 中的服务是一个函数或对象。AngularJS 中你可以创建自己的服务，或使用内建服务。什么是服务...
vue cli Vue CLI CSS 相关

VueCLI中文教程

Vue CLI 项目天生支持PostCSS、CSS Modules和包含Sass、Less、Stylus在内的预处理器。引用静态资源所有编译后的 CSS 都会通过css...

elementui下拉菜单 ElementPlus Dropdown 下拉菜单

elementui下拉菜单

ElementPlus Dropdown 下拉菜单

Dropdown 下拉菜单

基础用法

触发对象

触发方式

菜单隐藏方式

指令事件

不同尺寸

Dropdown Attributes

Dropdown Slots

Dropdown Events

¶Dropdown Menu Item Attributes