vue3使用element-plus手动更改url后is-active和菜单的focus颜色不同步问题

在实习,给了个需求做个新的ui界面,遇到了一个非常烦人的问题

如下,手动修改url时,is-active和focus颜色不同步

虽然可以直接让el-menu-item:focus为白色能解决这个问题,但是我就是想要有颜色哈哈哈,有些执着

研究了很久之后找到了解决办法

首先,先给menu-item设置一个v-bind:class方法,来动态改变颜色

接着将is-active的activeIndex值和传过来的path判断,判断它们是否相等,如果相等就给focus

不相等就清除掉focus颜色

记得要加!important,否则是不生效的!

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

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

相关文章

车载实操:一对一实操学习、CANoe实操学习、推荐就业机会、就业技术支持、协助面试辅导

FOTA模块中OTA的知识点:1.测试过程中发现哪几类问题? 可能就是一个单键的ecu,比如升了一个门的ecu,他的升了之后就关不上,还有就是升级组合ecu的时候,c屏上不显示进度条。 2.在做ota测试的过程中&#xff…

【鸡翅Club】项目启动

一、项目背景 这是一个 C端的社区项目,有博客、交流,面试学习,练题等模块。 项目的背景主要是我们想要通过面试题的分类,难度,打标,来评估员工的技术能力。同时在我们公司招聘季的时候,极大的…

前端SSR框架(Next、Nuxt)利用宝塔面板部署

1、部署的本质 SSR服务端渲染的框架部署区别于常规的CSR项目的部署,并不是打包之后访问某个文件就行,而是需要在服务器中运行项目之后访问某个地址,无论是基于Vue的Nuxt.js框架还是基于React的Next.js框架道理都是一样的 因此区别于CSR我们…

Django学习-静态文件

注意:配置项是个元祖,如果只有一项,别忘了在元素后面加逗号 settings: STATICFILES_DIRS (os.path.join(BASE_DIR,static),)urls: path(test_static, views.test_static)views: def test_static(request):return render(request,test_stat…

中科星图(GVE)——过火面积识别(dNBR)和CART方法进行火灾识别

目录 简介 函数 sampleRegions(collection,properties,scale,projection,tileScale,geometries) gve.Classifier.Cart(maxNodes,minLeafPopulation,maxDepth) updateMask(mask) 代码 网址推荐 知识星球 机器学习 简介 过火面积识别(dNBR)和CART…

Jlink 直接读取单片机数据

1. 驱动版本 因人而异,这里我使用的是 “J-Flash V6.96” 本人驱动链接:夸克网盘 提取码:rgzk 2. 打开软件 3. 创建jlink工程 4. 选择芯片 此处本人使用芯片 “STM32F103VCT6” 5. 连接单片机 连接成功反馈 6. 读取单片机内部数据 …

WordPress监控用户行为回放插件

在数字营销的世界里,了解用户行为是提升用户体验和转化率的关键。nicen-replay 插件,它能够让您轻松回放用户在网站上的每一步操作,从点击到滚动,再到表单填写,每一个细节都清晰可见 nicen-replay,是一款可…

目标检测——Cascade R-CNN算法解读

论文: Cascade R-CNN: Delving into High Quality Object Detection (2017.12.3) 链接:https://arxiv.org/abs/1712.00726 Cascade R-CNN: High Quality Object Detection and Instance Segmentation (2019.6.24) 链接:https://arxiv.org/abs…

Miniconda管理虚拟环境【Python环境配置】

Miniconda管理虚拟环境【Python环境配置】 1. 下载并安装Miniconda2. 管理虚拟环境3. 管理虚拟环境中的包 1. 下载并安装Miniconda 1. 下载 从清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载Miniconda:https://mirrors.tuna.tsinghua.edu.cn/anaconda…

基于YOLO11/v10/v8/v5深度学习的安检X光危险品检测与识别系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…

技术分享:A-23OH型树脂在汽车涂装废溶剂回收中的应用

在当今汽车制造业竞争激烈的环境下,提高生产效率、降低成本的同时,满足环保要求已成为各制造商追求的核心目标。水性涂料因其环保、节能等多重优势,在汽车涂装领域的应用日益广泛。然而,随之而来的喷涂废溶剂处理问题也日益凸显。…

面试应该问什么?

在求职者面试的过程中,向面试官提问是一个展现自己积极态度、对职位和公司兴趣以及进一步了解工作环境和职业发展机会的重要环节。以下是一些求职者可以在面试中向面试官提问的问题,这些问题旨在帮助你更全面地了解未来的工作环境、团队文化、以及个人职…

【SSM详细教程】-04-Spring基于注解的组件扫描

精品专题: 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课…

HTML5教程(三)- 常用标签

1 文本标签-h 标题标签&#xff08;head&#xff09;&#xff1a; 自带加粗效果&#xff0c;从h1到h6字体大小逐级递减一个标题独占一行 语法 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5…

CANoe_CDD_FaultMemory_显示<DTC is defined in the database>解决方法

1、显示<DTC is defined in the database> 2、问题原因 a、在Base Variant中的Fault Memory没有数据 b、新建数据&#xff08;参考导入或者新建方法&#xff09; c、复制数据过来 &#xff08;在Fault Memory中Diagnostic Trouble Codes的Avariable中全选复制到此处&am…

FFmpeg的简单使用【Windows】--- 指定视频的时长

目录 功能描述 效果展示 代码实现 前端代码 后端代码 routers 》users.js routers 》 index.js app.js 功能描述 此案例是在上一个案例【FFmpeg的简单使用【Windows】--- 视频混剪添加背景音乐-CSDN博客】的基础上的进一步完善&#xff0c;可以先去看上一个案例然后再…

Java基于SSM微信小程序物流仓库管理系统设计与实现(lw+数据库+讲解等)

选题背景 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个…

mysql的各种存储引擎

文章目录 前言1. InnoDB特点 2. MyISAM特点innodb与myisam引擎之间的区别 3. MEMORY特点 4. ARCHIVE特点 5. NDBCluster特点 6. FEDERATED特点 7. CSV特点 总结 前言 MySQL 支持多种存储引擎&#xff0c;每种引擎都有其独特的功能和适用场景。存储引擎是指数据库管理系统用来存…

[PHP]__callStatic

第一种&#xff1a;以下代码不会触发__callStatic&#xff0c;也不会报错 test是空方法 <?php class A {public function test(){}public static function __callStatic($method, $args){print_r(aaaaaaaaaaaaaaaaaaaaa);} }A::test();第二种&#xff1a;以下代码不会触发…

MYSQL-多表查询和函数

第一题讲解 # 1. 查出至少有一个员工的部门&#xff0c;显示部门编号、部门名称、部门位置、部门人数。 分析:(分析要查的表): (显示的列):(关联条件):(过滤条件):[分组条件]:[排序条件]:[分页条件]:SELECT d.deptno, dname, loc, count(empno) FROM dept d JOIN emp e ON d…