前端学习笔记element-Plus

【element-plus菜单】参数说明: 

  active-text-color="#ffd04b"——激活颜色

 background-color="#232323"——背景颜色(29,160,176)
 :default-active="$route.path"——配置默认高亮的菜单项
 text-color="#fff"
 router  router选项开启,el-menu-item 的 index 就是点击跳转的路径

el-menu-item 菜单项

      index="/article/channel" 配置的是访问的跳转路径,配合default-active的值,实现高亮

Element PLus官方网址:Container 布局容器 | Element Plus

 Element PLus官方网址:Menu 菜单 | Element Plus (element-plus.org)

导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。

 <el-menuactive-text-color="#ffd04b"background-color="#232323":default-active="$route.path"text-color="#fff"router><el-menu-item index="/article/channel"><el-icon><Management /></el-icon><span>文章分类</span></el-menu-item><el-menu-item index="/article/manage"><el-icon><Promotion /></el-icon><span>文章管理</span></el-menu-item><el-sub-menu index="/user"><!-- 多级菜单的标题 - 具名插槽 title --><template #title><el-icon><UserFilled /></el-icon><span>个人中心</span></template><!-- 展开的内容 - 默认插槽 --><el-menu-item index="/user/profile"><el-icon><User /></el-icon><span>基本资料</span></el-menu-item><el-menu-item index="/user/avatar"><el-icon><Crop /></el-icon><span>更换头像</span></el-menu-item><el-menu-item index="/user/password"><el-icon><EditPen /></el-icon><span>重置密码</span></el-menu-item></el-sub-menu></el-menu>

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

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

相关文章

【Django DRF】一篇文章总结Django DRF框架

第一章 DRF框架基础 1.1 DRF简介 1.1.1 DRF定义与作用 1. 定义 DRF 即 Django REST framework&#xff0c;它是一个建立在 Django 基础之上的强大且灵活的工具包&#xff0c;用于构建 Web API&#xff08;应用程序编程接口&#xff09;&#x1f60e;。简单来说&#xff0c;…

如何解决 Python 项目安装依赖报错:ERROR: Failed to build installable wheels for some pyproject.toml based project

如何解决 Python 项目安装依赖报错&#xff1a;ERROR: Failed to build installable wheels for some pyproject.toml based projects 在使用 pip 安装 Python 项目的依赖时&#xff0c;遇到类似如下的报错信息&#xff1a; ERROR: Failed to build installable wheels for s…

使用f5-tts训练自己的模型笔记

摘要 服务器都有了&#xff0c;这不得练练丹&#xff0c;有点说不过去啊。所以尝试了从头开始训练一个模型&#xff0c;结果由于推理页面好像有bug&#xff0c;不知道是不是失败了&#xff0c;然后又尝试微调一下模型。本篇文章主要记录了三流调包侠尝试炼丹过程中学习到的一些…

安全可控的AI底座:灯塔大模型应用开发平台全面实现国产信创兼容适配认证

国产信创产品兼容适配认证是为了支持和推动国产信息技术产品和服务的发展而设立的一种质量标准和管理体系。适配认证旨在确保相关产品在安全性、可靠性、兼容性等方面达到一定的标准&#xff0c;以满足政府和关键行业对信息安全和自主可控的需求。 北京中烟创新科技有限公司&a…

初识Vue【1】

1.什么是Vue&#xff1a; Vue (读音 /vjuː/&#xff0c;类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或…

Jest入门

快速入门 Jest中文文档 | Jest中文网 1.下载&#xff1a;npm install --save-dev jest 2.创建 sum.js 文件&#xff1a; function sum(a, b) { return a b; } module.exports sum; 3.创建sum.test.js 的文件 const sum require(./sum); test(adds 1 2 to equal 3,…

Spring Boot企业级开发五大核心功能与高级扩展实战

前言 在企业级应用开发中&#xff0c;Spring Boot已成为事实上的Java开发标准。本文将从企业实际需求出发&#xff0c;深入剖析Spring Boot五大必用核心功能&#xff0c;并扩展讲解三项高级开发技能&#xff0c;帮助开发者掌握构建健壮、高效、易维护的企业级应用的必备技术。…

2025电工杯数学建模B题思路数模AI提示词工程

我发布的智能体链接&#xff1a;数模AI扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力&#xff0c;扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体&#xff0c;并发布到豆包、飞书等各个平台。https://www.coze.cn/search/n…

LabVIEW开发FPGA磁声发射应力检测系统

工业级磁声发射应力检测系统&#xff0c;针对传统设备参数固定、灵活性不足的痛点&#xff0c;采用 Xilinx FPGA 与 LabVIEW 构建核心架构&#xff0c;实现激励信号可调、多维度数据采集与实时分析。系统适用于铁磁性材料应力检测场景&#xff0c;具备高集成度、抗干扰性强、检…

Java IO流学习指南:从小白到入门

Java的IO&#xff08;Input/Output&#xff09;流是处理数据输入和输出的基础。无论是读取文件、写入文件&#xff0c;还是通过网络传输数据&#xff0c;IO流都无处不在。对于刚接触Java的新手&#xff0c;理解IO流可能会有些困惑&#xff0c;但别担心&#xff0c;今天我们将一…

【后端高阶面经:微服务篇】1、微服务架构核心:服务注册与发现之AP vs CP选型全攻略

一、CAP理论在服务注册与发现中的落地实践 1.1 CAP三要素的技术权衡 要素AP模型实现CP模型实现一致性最终一致性&#xff08;Eureka通过异步复制实现&#xff09;强一致性&#xff08;ZooKeeper通过ZAB协议保证&#xff09;可用性服务节点可独立响应&#xff08;支持分区存活…

QNAP NEXTCLOUD 域名访问

我是用docker compose方式安装的&#xff0c;虽然不知道是不是这么个叫法&#xff0c;废话不多说。 背景&#xff1a;威联通container station安装了nextcloud和lucky&#xff0c;lucky进行的域名解析和反代 先在想安装的路径、数据存储路径、数据库路径等新建文件夹。再新建…

高级SQL技巧:窗口函数与复杂查询优化实战

高级SQL技巧&#xff1a;窗口函数与复杂查询优化实战 开篇&#xff1a;数据库开发中的挑战 在现代企业级应用中&#xff0c;数据库不仅是存储数据的核心组件&#xff0c;更是处理复杂业务逻辑的重要工具。然而&#xff0c;随着数据量和并发请求的不断增长&#xff0c;传统的S…

《STL--list的使用及其底层实现》

引言&#xff1a; 上次我们学习了容器vector的使用及其底层实现&#xff0c;今天我们再来学习一个容器list&#xff0c; 这里的list可以参考我们之前实现的单链表&#xff0c;但是这里的list是双向循环带头链表&#xff0c;下面我们就开始list的学习了。 一&#xff1a;list的…

docker中使用openresty

1.为什么要使用openresty 我这边是因为要使用1Panel&#xff0c;第一个最大的原因&#xff0c;就是图方便&#xff0c;比较可以一键安装。但以前一直都是直接安装nginx。所以需要一个过度。 2.如何查看openResty使用了nginx哪个版本 /usr/local/openresty/nginx/sbin/nginx …

vscode包含工程文件路径

在 VSCode 中配置 includePath 以自动识别并包含上层目录及其所有子文件夹&#xff0c;需结合通配符和相对/绝对路径实现。以下是具体操作步骤及原理说明&#xff1a; 1. 使用通配符 ** 递归包含所有子目录 在 c_cpp_properties.json 的 includePath 中&#xff0c;${workspac…

【排序算法】典型排序算法 Java实现

以下是典型的排序算法分类及对应的 Java 实现&#xff0c;包含时间复杂度、稳定性说明和核心代码示例&#xff1a; 一、比较类排序&#xff08;通过元素比较&#xff09; 1. 交换排序 ① 冒泡排序 时间复杂度&#xff1a;O(n)&#xff08;优化后最优O(n)&#xff09; 稳定性&…

多模态大语言模型arxiv论文略读(八十七)

MG-LLaVA: Towards Multi-Granularity Visual Instruction Tuning ➡️ 论文标题&#xff1a;MG-LLaVA: Towards Multi-Granularity Visual Instruction Tuning ➡️ 论文作者&#xff1a;Xiangyu Zhao, Xiangtai Li, Haodong Duan, Haian Huang, Yining Li, Kai Chen, Hua Ya…

塔能节能平板灯:点亮苏州某零售工厂节能之路

在苏州某零售工厂的运营成本中&#xff0c;照明能耗占据着一定比例。为降低成本、提升能源利用效率&#xff0c;该工厂与塔能科技携手&#xff0c;引入塔能节能平板灯&#xff0c;开启了精准节能之旅&#xff0c;并取得了令人瞩目的成效。 一、工厂照明能耗困境 苏州该零售工厂…

数据库事务的四大特性(ACID)

一、前言 在现代数据库系统中&#xff0c;事务&#xff08;Transaction&#xff09;是确保数据一致性和完整性的重要机制。事务的四大特性——原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;…