当前位置: 首页 > news >正文

ElementUI浅尝辄止28:Dropdown 下拉菜单

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

1.如何使用?

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

//通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下,下拉按钮只要hover即可,无需点击也会显示下拉菜单。<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><style>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style>

2.触发对象

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

//设置split-button属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true即可。<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><style>.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>

3.触发方式

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

在trigger属性设置为click即可。<el-row class="block-col-2"><el-col :span="12"><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="12"><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><style>.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>

4.菜单隐藏方式

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

//下拉菜单默认在点击菜单项后会被隐藏,将hide-on-click属性默认为false可以关闭此功能。<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><style>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style>

5.指令事件

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

<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><style>.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>

6. 不同尺寸

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

//额外的尺寸:medium、small、mini,通过设置size属性来配置它们。<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>

 

相关文章:

ElementUI浅尝辄止28:Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。 1.如何使用&#xff1f; 移动到下拉菜单上&#xff0c;展开更多操作。 //通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下&#xff0c;下拉按钮只要hover即可&#xff0c;无需点击也会显示下拉菜…...

jupyter 格式化与快捷键

1、标题&#xff1a; # 一级标题 ## 二级标题 ### 三级标题 2、 加粗文本&#xff1a; **加粗文本** 3、斜体文本&#xff1a; _斜体_ 4、删除线 ~删除线~ 5、高亮文本 高亮文本 6、区块引用 > 我是引用文字 >> 我是第二层 >&g…...

Spring以及SpringBoot/SpringCloud注解

一、SpringBoot/Spring 1、SpringBootApplication 包含Configuration、EnableAutoConfiguration、ComponentScan通常在主类上 其中ComponentScan让Spring Boot扫描到Configuration类并把它加入到程序上下文&#xff0c;如果扫描到有Component Controller Service等这些注解的…...

vim常用操作

一、Esc键 & 命令模式 1.撤销&#xff1a;u 恢复撤销&#xff1a;Ctrl r 2.定位 行首&#xff1a;0 行尾&#xff1a;$ 第7行&#xff1a;7G 3.编辑 下行开始插入&#xff1a; o 删除行&#xff1a;dd 复制3行并粘贴&#xff1a;3yy ---> p 复制单词并粘贴&#…...

Serverless Framework 亚马逊云(AWS)中国地区部署指南

Serverless Framework 亚马逊云(AWS)中国地区部署指南 Serverless Framework 亚马逊云(AWS)中国地区部署指南 前言前置准备 1. 账号的注册2. 全局安装 serverless3. 设置你的系统环境变量4. 设置部署凭证 快速部署一个 hello world 创建入口函数 index.js event 参数context 参…...

【Spring Cloud系统】- 轻量级高可用工具Keepalive详解

【Spring Cloud系统】- 轻量级高可用工具Keepalive详解 文章目录 【Spring Cloud系统】- 轻量级高可用工具Keepalive详解一、概述二、Keepalive分类2.1 TCP的keepalive2.2 HTTP的keep-alive2.3 TCP的 KeepAlive 和 HTTP的 Keep-Alive区别 三、nginx的keepalive配置3.1 nginx保持…...

【JAVA-Day05】深入理解Java数据类型和取值范围

深入理解Java数据类型和取值范围 深入理解Java数据类型和取值范围摘要一、Java的数据类型1.1 存储单位1.2 Java基本数据类型 二、Java的取值范围2.1 变量定义2.2 取值范围验证 三、总结 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb;…...

“JSR303和拦截器在Java Web开发中的应用与实践“

目录 引言JSR303什么是JSR303?为什么要使用JSR303?常用注解快速入门JSR303 拦截器什么是拦截器拦截器与过滤器应用场景快速入门拦截器 总结 引言 在Java Web开发过程中&#xff0c;我们经常会遇到需要对输入数据进行验证和处理&#xff0c;同时需要对请求进行拦截与控制的需…...

第六章 图 六、最小生成树(Prim算法、Kruskal算法)

一、定义 对于一个带权连通无向图G(V,E)&#xff0c;生成树不同&#xff0c;每棵树的权(即树中所有边上的权值之和)也可能不同。设R为G的所有生成树的集合&#xff0c;若T为R中边的权值之和最小的生成树&#xff0c;则T称为G的最小生成树(Minimum-Spanning-Tree, MST)。 二、手…...

机器学习笔记 - 什么是 MLOps?

什么是 MLOps? Machine learning operations (MLOps) 作为一个新兴领域,MLOps 在数据科学家、机器学习工程师和人工智能爱好者中迅速崛起。MLOps 代表机器学习操作。MLOps 是机器学习工程的核心功能,专注于简化将机器学习模型投入生产、然后维护和监控的过程。MLOps 是一种…...

初阶扫雷(超详解)

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;C语言小游戏 &#x1f388;推荐相关博文&#xff1a;初阶三子棋&#xff08;超详解&#xff09; 初阶扫雷 1.游戏介绍2.基本思路3.实现前的准备4.实现步骤4.1 打印菜单4.2 初始化扫雷棋盘4.3 打印扫雷棋…...

计算机视觉CV:1000字总结介绍

目录 1.CV计算机视觉 2.计算机视觉的应用 3.计算机视觉的基本技术 4.计算机视觉的发展趋势 1.CV计算机视觉 计算机视觉&#xff08;Computer Vision, CV&#xff09;是指通过计算机技术模拟人类视觉&#xff0c;让计算机能够“看”懂和理解图像和视频。计算机视觉发展了多…...

JavaScript 之 Symbol 数据类型

一、简介 ​ symbol类型是ES6新引入的一种基本数据类型&#xff0c;该类型具有静态属性和静态方法。其中静态属性暴露了几个内建的成员对象&#xff0c;静态方法暴露了全局的symbol注册。 ​ symbol类型具有以下特点&#xff1a;① 唯一性&#xff1a;每个symbol值都是唯一的…...

在Docker中运行PostgreSQL数据库

1.下载Docker 2.设置DockerHub账号 3.运行Docker并下载Image 4.启动PostgreSQL Image 5.连接到数据库运行SQL docker run --name some-postgres -p 5432:5432 -e POSTGRES_PASSWORDmysecretpassword -d postgres 开放端口从Docker容器到主操作系统&#xff0c;这将允许我们…...

实现Spring Boot集成MyBatis

引言 在Java开发中&#xff0c;Spring Boot和MyBatis是非常常用的框架。Spring Boot是一个快速开发应用程序的框架&#xff0c;而MyBatis是一个持久化框架&#xff0c;可以方便地操作数据库。本文将介绍如何使用Idea集成Spring Boot和MyBatis&#xff0c;并创建一个简单的示例…...

关于算法的时间复杂度(度量算法执行时间的两种方法、渐进时间复杂度、时间复杂度的几个性质、渐进估算、常见的渐进时间复杂度排序)

目录 度量算法执行时间的两种方法 事后统计法&#xff08;Post Hoc Analysis&#xff09;&#xff1a; 事前统计法&#xff08;Pre Hoc Analysis&#xff09;&#xff1a; 渐进时间复杂度 时间复杂度的几个性质 渐进估算 常见的渐进时间复杂度排序 度量算法执行时间的两…...

SpringBoot项目--电脑商城【显示商品详情功能】

1.持久层[Mapper] 1规划需要执行的SQL语句 根据商品id显示商品详情的SQL语句 SELECT * FROM t_product WHERE id?2 设计接口和抽象方法 在ProductMapper接口中添加抽象方法 /*** 根据商品id查询商品详情* param id 商品id* return 匹配的商品详情&#xff0c;如果没有匹配…...

VLAN笔记

虚拟VLAN 什么是VLAN VLAN的作用 VLAN的优缺点 VLAN的配置方法 VLAN有哪些接口模式 access与trunk接口的区别 Hybrid接口 拓扑实验enspCiscoH3C ​ 什么是VLAN VLAN&#xff08;Virtual Local Area Network&#xff09;又称虚拟局域网&#xff0c;是指在交换局域网的基础上&a…...

分类算法系列⑤:决策树

目录 1、认识决策树 2、决策树的概念 3、决策树分类原理 基本原理 数学公式 4、信息熵的作用 5、决策树的划分依据之一&#xff1a;信息增益 5.1、定义与公式 5.2、⭐手动计算案例 5.3、log值逼近 6、决策树的三种算法实现 7、API 8、⭐两个代码案例 8.1、决策树…...

前端面试(基础)

一、CSS 1.说一下CSS的盒模型。 在HTML页面中的所有元素都可以看成是一个盒子 盒子的组成&#xff1a;内容content、内边距padding、边框border、外边距margin 盒模型的类型&#xff1a; 标准盒模型 margin border padding content IE盒模型 margin content(border…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...