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,否则是不生效的!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JAVA面试题】什么是Springboot的自动配置以及注意事项

文章目录 强烈推荐核心概念:自动配置的关键特点:示例: 需要注意的点1.默认配置可能不适合所有场景2.Bean 冲突与覆盖3.应用启动慢的问题4.过度依赖自动配置5.安全性问题6.依赖冲突与版本兼容7.过多不必要的自动配置8.调试困难 专栏集锦 强烈推…

python实战项目43:采集汽车之家数据

python采集汽车之家数据 一、寻找数据接口二、发送请求获取响应三、解析数据四、完整代码一、寻找数据接口 如下图所示,在汽车之家首页点击报价图标: 在下图中选择价位,例如选择15-20万: 打开浏览器开发者工具,刷新页面,找到数据接口。接下来,通过翻页寻找接口url的变…

如果你不幸成为家里第一个GIS专业的学生

家里无法给我很多建设性意见,大学四年到工作都是自己一个人跌跌撞撞走过来的,期间因为信息差走了不少弯路。对于GIS专业而言,没有家里人的指路,信息差就成了同学之间拉开差距的重要因素。现在我们要做的就是打破专业信息差&#x…

Vue+ECharts+iView实现大数据可视化大屏模板

Vue数据可视化 三个大屏模板 样式还是比较全的 包括世界地图、中国地图、canvas转盘等 项目演示: 视频: vue大数据可视化大屏模板

uiautomatorviewer安卓9以上正常使用及问题处理

一、安卓9以上使用uiautomatorviewer问题现象 打开Unexpected error while obtaining UI hierarchy 问题详情 Unexpected error while obtaining UI hierarchy java.lang.reflect.InvocationTargetException 二、问题处理 需要的是替换对应D:\software\android-sdk-windows…

这种V带的无极变速能用在新能源汽车上吧?

CVT的无极变速器的结构能用在电动汽车上吗?

Python 将网页保存为图片(Chrome内核)

一、背景介绍 之前写过一篇将网页保存为图片的文章 C# 将网页保存为图片(利用WebBrowser)_c# webbrowser 把网页内容转换成图片-CSDN博客​​​​​​ 这里有个弊端,C# WebBrowser使用的是IE内核,目前很多网站都不支持IE了&…

深度学习(二)框架与工具:开启智能未来之门(2/10)

一、深度学习框架:引领智能变革的利器 深度学习框架在人工智能领域中扮演着至关重要的角色,堪称引领智能变革的利器。随着人工智能技术的飞速发展,深度学习框架不断崛起并迅速壮大。 主流的深度学习框架如 TensorFlow、PyTorch、Keras 等&a…

社招高频面试题

1.单例模式 面试突击50:单例模式有几种写法? 2.Mybatis缓存机制 MyBatis的一、二级缓存查询关系 一级缓存是SqlSession级别,不能跨SqlSession共享,默认开启。 二级缓存是基于mapper namespace级别的,可以跨SqlSessi…

第J6周:ResNeXt-50实战解析(pytorch版)

>- **🍨 本文为[🔗365天深度学习训练营]中的学习记录博客** >- **🍖 原作者:[K同学啊]** 任务: ●阅读ResNeXt论文,了解作者的构建思路 ●对比我们之前介绍的ResNet50V2、DenseNet算法 ●使用ResNeX…

基于Java+SpringBoot+Vue的古典舞在线交流平台的设计与实现

基于JavaSpringBootVue的古典舞在线交流平台的设计与实现 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末附源码下载链接&a…

科研类型PPT的制作技巧

目录 科研类型PPT的制作技巧 荣誉: 首页:ppt开头结尾 小标题 重点标记:加粗红色下划线 使用三线表 图片,文本排版 一、明确目的与受众分析 二、基础设计原则 三、内容组织与呈现 四、绘图与模型制作 五、其他注意事项 科研类型PPT的制作技巧 荣誉: 首页:ppt开…

spark读取parquet文件

源码 parquet文件读取的入口是FileSourceScanExec,用parquet文件生成对应的RDD 非bucket文件所以走createNonBucketedReadRDD方法。 createNonBucketedReadRDD 过程: 确定文件分割参数 openCostInBytes4M 相关参数spark.sql.files.openCostInBytes4M…

Vue 上传图片前 裁剪图片

一. 使用的技术 vue-cropper 文档:vue-cropper | A simple picture clipping plugin for vue 二. 安装 npm install vue-cropper 或 yarn add vue-cropper 三. 引入 在使用页面中引用 import { VueCropper } from vue-cropper; 四. 使用 配置项&#xff1…

运动爱好者不可错过的双十一特惠,2024年度最火运动装备大推荐

随着健康意识的日益增强,越来越多的人加入到了运动的行列中。无论是追求速度与激情的跑步爱好者,还是享受汗水与肌肉碰撞的健身房常客,亦或是喜欢在自然中寻找乐趣的户外探险家,一款合适的运动装备总是能让人在运动过程中事半功倍…

【MySQL】索引和事务

目录 🌴索引 🚩概念 🚩索引的作用 🚩索引的使用场景 🚩索引的使用 🏀查看索引 🏀创建索引 🏀删除索引 🎄索引的底层数据结构 🚩引入B树(B-树) &am…

【含开题报告+文档+PPT+源码】基于SpringBoot和Vue的编程学习系统

开题报告 随着信息技术的迅猛发展和数字化转型的深入推进,编程技能已经成为现代社会中不可或缺的一项基本能力。无论是软件开发、数据分析还是人工智能等领域,编程都扮演着至关重要的角色。因此,培养和提高编程技能对于个人职业发展和社会创…

Python Numpy 实现神经网络自动训练:反向传播与激活函数的应用详解

Python Numpy 实现神经网络自动训练:反向传播与激活函数的应用详解 这篇文章介绍了如何使用 Python 的 Numpy 库来实现神经网络的自动训练,重点展示了反向传播算法和激活函数的应用。反向传播是神经网络训练的核心,能够通过计算梯度来优化模…

文献阅读:通过深度神经网络联合建模多个切片构建3D整体生物体空间图谱

文献介绍 文献题目: 通过深度神经网络联合建模多个切片构建3D整体生物体空间图谱 研究团队: 杨灿(香港科技大学)、吴若昊(香港科技大学) 发表时间: 2023-10-19 发表期刊: Nature M…

01 漫画解说-图片框的分割

to 查找最佳的轮廓模式 import cv2 as cv import numpy as np from matplotlib import pyplot as pltimg cv.imread(data/test02.png,0) ret,thresh1 cv.threshold(img,127,255,cv.THRESH_BINARY) ret,thresh2 cv.threshold(img,127,255,cv.THRESH_BINARY_INV) ret,thres…