element plus中menu菜单技巧

我在使用element plus的menu(侧边栏)组件的过程中遇到了一些问题,就是menu编写样式和路由跳转,下面给大家分享以下,我是怎么解决的。

1.页面效果

我要实现的网站布局是这样的:

 侧边栏折叠以后的效果:

网站的布局我是用element plus官网提供的布局方式:

 2.样式

下面是对应的style设置:

这里我用了tailwind css。

3.路由

4.路由对应的页面

1.HomeView.vue

2.AboutView.vu

3.LayoutView.vue

<script setup>
import { Expand, Fold, HomeFilled, InfoFilled } from "@element-plus/icons-vue";
import {ref} from "vue";const isSidebarOpen = ref(false)</script><template><div class="common-layout"><el-container><el-aside :class="{'is-sidebar-open':isSidebarOpen}" width="200px" class="bg-gray-800 h-screen"><!--最上面logo--><div class="-ml-2 h-16 flex items-center justify-center"><img class="object-cover h-14 w-14" src="@/assets/images/A%20拷贝.png" alt="logo"><h1 v-show="!isSidebarOpen" class="-ml-2 text-2xl text-white font-bold">Blog</h1></div><el-menu:collapse="isSidebarOpen":collapse-transition="false"router:default-active="$route.path"background-color="#1f2937"text-color="#fff"style="border: none"><el-menu-item index="/home" route="/home"><el-icon><HomeFilled /></el-icon><span class="font-semibold">Home</span></el-menu-item><el-menu-item index="/about" route="/about"><el-icon><InfoFilled /></el-icon><span class="font-semibold">About</span></el-menu-item></el-menu></el-aside><el-container><el-header class="h-16 shadow-md z-10 flex items-center justify-between"><div><button @click="isSidebarOpen = !isSidebarOpen"><el-icon><component :is="isSidebarOpen ? Expand : Fold"></component></el-icon></button></div><div class="flex items-center space-x-4"><h1 class="font-medium">AkbarSmile</h1><img class="w-10 h-10 rounded-full" src="@/assets/images/Mofei1-cut.jpg" alt="avatar"></div></el-header><el-main class="bg-slate-100"><router-view></router-view></el-main></el-container></el-container></div>
</template><style scoped>
aside {@apply transition-all duration-300;
}
.is-sidebar-open {@apply w-16;
}.el-menu {@apply w-full
}
.el-menu--collapse .el-menu-item {@apply p-0 m-0 flex items-center justify-center;
}
.el-menu-item.is-active {@apply bg-purple-600 text-white w-full ;
}
</style>

可能很多同学没有使用过tailwind css,但是用普通的css代码,也可以实现同样的效果。

大家自己打开多研究研究,其实能找到找技巧的话,element plus非常好用。

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

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

相关文章

python爬虫快速入门之---Scrapy 从入门到包吃包住

python爬虫快速入门之—Scrapy 从入门到包吃包住 文章目录 python爬虫快速入门之---Scrapy 从入门到包吃包住一、scrapy简介1.1、scrapy是什么?1.2、Scrapy 的特点1.3、Scrapy 的主要组件1.4、Scrapy 工作流程1.5、scrapy的安装 二、scrapy项目快速入门2.1、scrapy项目快速创建…

详解equals底层原理

equals 方法是 Java 中用于比较两个对象是否“相等”的方法。在 Java 中&#xff0c;每个类都继承自 java.lang.Object 类&#xff0c;而 equals 方法正是定义在 Object 类中的一个方法。默认情况下&#xff0c;Object 类的 equals 方法比较的是两个对象的内存地址&#xff08;…

【GIT】.gitignore文件的使用

使用 Visual Studio 开发项目&#xff0c;并使用 Git 将项目推送到 GitLab 时&#xff0c;有一些文件是自动生成的、特定于开发环境的文件&#xff0c;通常不应该被推送到远程仓库。这就是 .gitignore 文件的作用&#xff0c;它可以告诉 Git 忽略这些文件或文件夹。 1. 哪些文…

解释 RESTful API,以及如何使用它构建 web 应用程序(AI)

RESTful API&#xff08;Representational State Transfer&#xff09;是一种基于HTTP协议的软件架构风格&#xff0c;用于构建可扩展、可维护和可重用的网络服务。 RESTful API的特点包括&#xff1a; 1. 基于资源&#xff1a;每个API都代表一个或多个资源&#xff0c;这些资…

SQL 多表联查

SQL JOIN (w3school.com.cn) SQL join用于根据两个或多个表中的列之间的关系&#xff0c;从这些表中查询数据。 之前跟着老师学数据库的时候学过&#xff0c;最近又在比较频繁的使用&#xff0c;再复习一下。 Person表&#xff1a; Id_P &#xff1a;居民编号。主键 …

大数据开发基于Hadoop+springboot平台的岗位推荐系统

文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图文章目录 前言 文章底部名片&#xff0c;获取项目的完整演示视频&#xff0c;免费解答技术疑问 项目介绍 随着网络科学技术不断的发展和普及化&#xff0c;用户在寻找适合自己的信息管理系统时面临着越来…

成功解决pycharm软件中按住Ctrl+点击指定函数却不能跳转到对应库中的源代码

成功解决pycharm软件中按住Ctrl点击指定函数却不能跳转到对应库中的源代码 目录 解决问题 解决方法 解决问题 在pycharm软件中按住Ctrl点击指定函数却不能跳转到对应库中的源代码 解决方法

探索秘境:如何使用智能体插件打造专属的小众旅游助手『小众旅游探险家』

文章目录 摘要引言智能体介绍和亮点展示介绍亮点展示 已发布智能体运行效果智能体创意想法创意想法创意实现路径拆解 如何制作智能体可能会遇到的几个问题快速调优指南总结未来展望 摘要 本文将详细介绍如何使用智能体平台开发一款名为“小众旅游探险家”的旅游智能体。通过这…

个人健康系统|个人健康数据管理系统|基于小程序+java的个人健康数据管理系统设计与实现(源码+数据库+文档)

个人健康数据管理系统 目录 基于小程序java的个人健康数据管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师…

ArcGIS Pro SDK (十七)宗地结构

ArcGIS Pro SDK (十七)宗地结构 环境:Visual Studio 2022 + .NET6 + ArcGIS Pro SDK 3.0 宗地结构 1 获取活动记录 string errorMessage = await QueuedTask.Run(() => {

高可用之限流-07-token bucket 令牌桶算法

限流系列 开源组件 rate-limit: 限流 高可用之限流-01-入门介绍 高可用之限流-02-如何设计限流框架 高可用之限流-03-Semaphore 信号量做限流 高可用之限流-04-fixed window 固定窗口 高可用之限流-05-slide window 滑动窗口 高可用之限流-06-slide window 滑动窗口 sen…

重构案例:将纯HTML/JS项目迁移到Webpack

我们已经了解了许多关于 Webpack 的知识&#xff0c;但要完全熟练掌握它并非易事。一个很好的学习方法是通过实际项目练习。当我们对 Webpack 的配置有了足够的理解后&#xff0c;就可以尝试重构一些项目。本次我选择了一个纯HTML/JS的PC项目进行重构&#xff0c;项目位于 GitH…

web3学习-区块链基础知识

1.1 区块链技术简史 block chain 点对点的分布式交易系统 比特币协议并不是图灵完备的。 以太坊协议加入了智能合约&#xff0c;智能合约是以太坊协议与比特币协议的最大区别&#xff08;图灵完备&#xff09; 1.2、区块链设计哲学 去中心化 由于没有中心化的数据库作为…

记录一个容易混淆的 Spring Boot 项目配置文件问题

记录一个容易混淆的 Spring Boot 项目配置文件问题 去年&#xff0c;我遇到了这样一个问题&#xff1a; 在这个例子中&#xff0c;由于密码 password 以 0 开头&#xff0c;当它被 Spring Boot 的 bean 读取时&#xff0c;前导的 0 被自动去掉了。这导致程序无法正确读取密码。…

网盘直链下载神器NDM

工具介绍 ​Neat Download Manager分享一款网盘不限速神器,安装步骤稍微有一点繁琐,但实际体验下载速度飞快,个人实际体验还是非常不错的 NDM是一款免费且强大的下载工具。可以帮助你下载各种文件&#xff0c;还能够在多任务下载中保持出色的速度及其稳定性 通过网盘分享的文…

【MySQL核心面试题】MySQL 核心 - Explain 执行计划详解!

欢迎关注公众号 【11来了】&#xff08;文章末尾即可扫码关注&#xff09; &#xff0c;持续 中间件源码、系统设计、面试进阶相关内容 在我后台回复 「资料」 可领取 编程高频电子书&#xff01; 在我后台回复「面试」可领取 30w 字的硬核面试笔记&#xff01; 感谢你的关注&…

【ios】在 SwiftUI 中实现可随时调用的加载框

在 SwiftUI 项目中实现一个自定义的加载框&#xff08;loading&#xff09;功能&#xff0c;可以在任意位置调用&#xff0c;以便显示加载动画或者进度条。下面的教程将详细讲解如何创建一个可复用的 Loading 组件&#xff0c;并通过通知机制控制其显示和隐藏。 先上效果&…

MySQL【知识改变命运】10

联合查询 0.前言1.联合查询在MySQL里面的原理2.练习一个完整的联合查询2.1.构造练习案例数据2.2 案例&#xff1a;⼀个完整的联合查询的过程2.2.1. 确定参与查询的表&#xff0c;学⽣表和班级表2.2.2. 确定连接条件&#xff0c;student表中的class_id与class表中id列的值相等2.…

wordpress 子比主题美化 四宫格 多宫格 布局插件

wordpress 主题美化 四宫格 多宫格 布局插件&#xff08;只在子比主题上测试过&#xff0c;其它主题没测试&#xff09; A5资源网四宫格布局插件是一个功能丰富的WordPress插件,专为创建自适应的四宫格布局而设计。这个插件具有以下主要特点: 灵活的布局: 支持1到8个宫格的自定…

nginx代理配置,搞定proxy_pass配置

nginx代理配置 容易晕的proxy_pass 后面 url带不带”/“的问题代理配置举例 常用代理配置前端页面代理前端请求代理后端请求代理 容易晕的proxy_pass 后面 url带不带”/“的问题 &#xff08;1&#xff09;配置 proxy_pass 时&#xff0c;当在后面的 url 加上了 /&#xff0c;…