阐述el-dropdown(下拉菜单)的基本知识

目录

  • 1. 基本知识
  • 2. Demo
  • 3. 实战

1. 基本知识

el-dropdown是一个常用的UI组件,用于创建下拉菜单,通常用于实现各种交互式菜单、导航栏或下拉选项

确保安装Element UI库,它包含了el-dropdown组件

npm install element-ui
# 或者
yarn add element-ui

导入项目:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

示例Demo如下:

<template><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>Action 1</el-dropdown-item><el-dropdown-item>Action 2</el-dropdown-item><el-dropdown-item>Action 3</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {// 组件的逻辑代码
};
</script><style>
/* 组件的样式代码 */
</style>

其中el-dropdown组件包含了一个el-dropdown-menu,el-dropdown-menu包含了多个el-dropdown-item,这些项就是菜单中的选项

对于属性和时间中,el-dropdown组件支持一系列属性和事件,用于定制和控制其行为。例如,可以使用trigger属性来设置触发下拉菜单的方式(默认是鼠标悬停),还可以监听command事件来处理菜单项被点击时的操作

也提供了多个插槽,允许定制菜单的内容和样式。使用slot属性来指定插槽的位置,常用的插槽包括dropdown、dropdown-title、dropdown-icon等

2. Demo

上述Demo是按钮组,如果是功能触发
需要设置为如下:

<template><el-dropdown split-button type="primary" @click="handleClick">下拉菜单<el-dropdown-menu slot="dropdown"><el-dropdown-item>Action 1</el-dropdown-item><el-dropdown-item>Action 2</el-dropdown-item><el-dropdown-item>Action 3</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>
export default {// 组件的逻辑代码
};
</script><style>
/* 组件的样式代码 */
</style>

也可增加其他的参数:
尺寸大小:<el-dropdown size="small" split-button type="primary">
指令: <el-dropdown-item command="c">
禁止选择: <el-dropdown-item disabled>
增加分割: <el-dropdown-item divided>

更多的参数选择可通过:el-dropdown官网说明

3. 实战

实战Demo中只是给部分代码以及展示,并无完整Demo

<img class="top-bar__img" :src="userInfo.avatar">
<el-dropdown><span class="el-dropdown-link">{{userInfo.real_name}}<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item icon="el-icon-search"><router-link to="/wel/index">{{$t('navbar.dashboard')}}</router-link></el-dropdown-item><el-dropdown-item icon="el-icon-edit"><router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link></el-dropdown-item><el-dropdown-item icon="el-icon-delete"@click.native="logout"divided>{{$t('navbar.logOut')}}</el-dropdown-item></el-dropdown-menu>
</el-dropdown>

截图如下所示 :

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

配置Web运行环境与第一个网页

安装与配置Web环境: 如下使用了VSC作为web的运行环境。 下面是VSC的官网点击进入:Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/download 1.下载 进入官网后可以看到有windows&#xff0c;linux&#xff0c;还有苹果按照自己的系统下载&…

Node Sass does not yet support your current environment

项目运行时报错&#xff1a;Node Sass does not yet support your current environment 原因是node版本过高。 解决办法&#xff1a; 使用nvm管理node版本&#xff0c;&#xff08;如何安装nvm&#xff1f;请点击跳转&#xff09; 具体步骤如下&#xff1a; 1.查看当前node…

Element UI中日期选择日(date-picker)等其他选择器下拉显示错位、位置错误解决

省流版 给选择器加上唯一key&#xff08;下面的想看就看&#xff09; 问题复现 需求是用一个下拉切换时间维度的选择&#xff0c;分别为年度、季度、月度&#xff0c;但是开发的时候发现&#xff0c;当切换的时候&#xff0c;视图可正常切换&#xff0c;但点击选择时却发现选…

软考系统架构设计师(摘抄)01

架构师承担的责任 系统架构师设计师是承担系统架构设计的核心角色&#xff0c;他不仅是连接用户需求和系统进一步设计与实现的桥梁&#xff0c;也是系统开发早期阶段质量保证的关键角色。系统架构师就是项目的总设计师&#xff0c;他是一个既需要掌控整体又需要洞悉局部瓶颈&a…

Vue 2 组件发布到 npm 的常见问题解决

按照 Vue 2 组件打包并发布到 npm 的方法配置项目后&#xff0c;项目在实际开发过程中&#xff0c;随着代码写法的多样性增加而遇到的各种打包问题&#xff0c;本文将予以逐一解决&#xff1a; 本文目录 同时导出多个组件 样式表 import 问题解决 Json 文件 import 问题解决…

图论最短路径以及floyd算法的MATLAB实现

图论是数学的一个分支&#xff0c;起源于18世纪。1736年&#xff0c;数学家欧拉通过解决“哥尼斯堡七桥问题”&#xff0c;将问题抽象成点和线的关系&#xff0c;并通过理论分析得出结论&#xff0c;这个过程标志着图论的产生&#xff0c;欧拉也因此被称为“图论之父”。图论研…

智慧城市解决方案大全:标准规范顶层设计指南、整体解决方案、厂商售前宣讲PPT、招投标、智慧城市白皮书等全套680份,一次性打包下载

关键词&#xff1a;智慧城市&#xff0c;智慧城市解决方案&#xff0c;智慧城市发展的前景与趋势&#xff0c;智慧城市概念主力流出&#xff0c;智慧城市项目包括哪些方面&#xff0c;智慧城市项目方案&#xff0c;智慧城市宣传片&#xff0c;智慧城市白皮书&#xff0c;智慧城…

MySQL之MVCC如何实现可重复读和提交读

(/≧▽≦)/~┴┴ 嗨~我叫小奥 ✨✨✨ &#x1f440;&#x1f440;&#x1f440; 个人博客&#xff1a;小奥的博客 &#x1f44d;&#x1f44d;&#x1f44d;&#xff1a;个人CSDN ⭐️⭐️⭐️&#xff1a;Github传送门 &#x1f379; 本人24应届生一枚&#xff0c;技术和水平有…

教程3_图像的轮廓

目录 目标 1. 特征矩 2、轮廓质心 3. 轮廓面积 4. 轮廓周长 5. 轮廓近似 6. 轮廓凸包 7. 边界矩形 7.1.直角矩形 7.2. 旋转矩形 8. 最小闭合圈 9. 拟合一个椭圆 10. 拟合直线 目标 在本文中&#xff0c;我们将学习 - 如何找到轮廓的不同特征&#xff0c;例如面积&…

力扣 217.存在重复元素

给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;num…

Ansible剧本playbooks详解

一、playbook简介 playbook是ansible用于配置&#xff0c;部署和管理托管主机剧本&#xff0c;通过playbook的详细描述&#xff0c;执行其中一系列tasks&#xff0c;playbook字面意思是剧本&#xff0c;现实中由演员按剧本表演&#xff0c;在ansible中由计算机进行安装&#x…

nginx负载均衡模式

轮询 (Round Robin) 用法&#xff1a;这是Nginx默认的负载均衡策略。每个请求会按顺序分配给upstream中的后端服务器&#xff0c;即按照配置的服务器列表顺序依次分配。 upstream backend {server backend1.example.com;server backend2.example.com;server backend3.example.c…

【Java】LinkedList vs. ArrayList:Java中的数据结构选择

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

docker日志大小设置(doker logs)

参考文章docker logs日志上限&#xff08;日志容量上限、日志大小上限&#xff09;&#xff08;默认大小、默认日志大小&#xff09;_docker 日志限制-CSDN博客 如果想要更改 Docker daemon 的全局默认设置&#xff0c;可以修改 Docker daemon 的配置文件 /etc/docker/daemon…

zookeeper--Znode类型详解---面试宝典

一、Znode分类 1、persistent_node 持久化节点 是默认类型&#xff0c;该类型节点&#xff0c;并不会随着客户端断开就会自动删除&#xff1b;zookeeper服务重启该节点也不会被删除&#xff0c;只有手动删除的时候才会删除&#xff1b;可以创建子节点&#xff1b; # create …

uniapp开发小程序遇到的问题,持续更新中

一、uniapp引入全局scss 在App.vue中引入uni.scss <style lang"scss">/* #ifndef APP-NVUE */import "uni.scss";/* #endif */ </style>注意&#xff1a;nvue页面的样式在编译时&#xff0c;有很多样式写法被限制了&#xff0c;容易报错。所…

【C++ leetcode】双指针(专题完结)

15. 三数之和 题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的…

驱动器的工艺结构原理及选型参数总结

🏡《总目录》 目录 1,概述2,工作原理2.1,信号转换2.2,电流放大2.3,电压级转换2.4,控制输出3,结构特点3.1,高集成度3.2,多功能性3.3,高性能3.4,省电节能3.5,稳定可靠4,工艺流程<

面试经典150题【101-110】

文章目录 面试经典150题【101-110】9.回文数61.加一172.阶乘后的069.x的平方根50.Pow(x,n)149.直线上最多的点数52.N皇后II120.三角形最小路径和64.最小路径和63.不同路径II 面试经典150题【101-110】 6道偏数学的题和4道二维dp 9.回文数 一开始想转为字符串再判断。后来发现…

信号处理--基于混合CNN和transfomer自注意力的多通道脑电信号的情绪分类的简单应用

目录 关于 工具 数据集 数据集简述 方法实现 数据读取 ​编辑数据预处理 传统机器学习模型(逻辑回归&#xff0c;支持向量机&#xff0c;随机森林) 多层感知机模型 CNNtransfomer模型 代码获取 关于 本实验利用结合了卷积神经网络 (CNN) 和 Transformer 组件的混合…