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

news2024/10/18 12:31:14

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

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

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

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

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

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

不相等就清除掉focus颜色

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

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

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

相关文章

一买一卖利润赛苹果,二手平台把阴阳检测玩明白了……

小柴最近看到这样一个案例,一网友在社交媒体上哭诉称,自己在某二手平台上看中了一支二手Apple pencil二代触控笔。 平台给出的检测报告显示,该产品是外观完好、功能完好接近全新的S等级产品,这位网友像捡到了宝一样,立…

不入耳开放式耳机哪个品牌好?这些品牌骨灰级开放式耳机推荐

开放式耳机以其独特的设计,不仅避免了长时间佩戴对耳朵造成的压迫感,还能让用户在享受音乐的同时保持对外界的感知,极大提升了使用安全性和舒适度。特别是对于那些长时间佩戴耳机的用户或是户外运动爱好者来说,开放式耳机无疑是一…

网页复制粘贴助手,Chrome网页复制插件(谷歌浏览器复制插件)

一款解决网页限制复制问题的插件,当你遇到限制复制粘贴和右键的网页是不是很头痛?安装这个插件后,点下插件按钮就能解决了 碰到这种情况 也是非常头疼 chrome拓展-chrome插件-强制复制 当我们浏览网页的时候,看到感兴趣的内容就…

Github 优质项目推荐(第七期)

文章目录 Github优质项目推荐 - 第七期一、【LangGPT】,5.7k stars - 让每个人都成为提示专家二、【awesome-selfhosted】,198k stars - 免费软件网络服务和 Web 应用程序列表三、【public-apis】,315k stars - 免费 API四、【JeecgBoot】&am…

校验台账生成网络事业调查表的方法

校验台账生成网络事业调查表的方法 一、打开教育事业统计调查表学校(机构)信息管理标准化台账“采集信息核查辅助工具二、导入本校台账并校验三、调查表统计导出四、完 一、打开教育事业统计调查表学校(机构)信息管理标准化台账“…

[已解决] pycharm添加本地conda虚拟环境 + 配置解释器 - pycharm找不到conda可执行文件

目录 问题: 方法: 补充:创建conda虚拟环境 参考文档:pycharm找不到conda可执行文件怎么办?-CSDN 问题: 1.显示:未为项目配置 Python 解释器 2.想在pycharm中使用本地创建的虚拟环境 方法&a…

请问医药销售智能仓系统包含哪些功能流程?

第一部分:医药销售智能仓系统功能清单 一、入库管理 货物信息录入 功能描述:支持手动输入或扫描药品包装上的条形码、二维码等,录入药品名称、规格、批次、有效期、生产厂家等信息。流程:操作人员使用扫描设备读取药品信息,系统自…

python实现屏幕录制,录音录制工具

python实现屏幕录制,录音录制工具 一,介绍 Python 实现的屏幕录制和录音录制工具是一个便捷的应用程序,旨在帮助用户同时捕捉计算机屏幕上的活动以及与之相关的音频输出。这个工具尤其针对教育工作者、内容创作者、技术支持人员以及任何需要…

uniapp使用html2canvas时,页面内的image元素模糊

不废话很简单只需要将image改成img就行 改之前 改之后 原因可能是因为uniapp里面的image标签做了某种处理

信息搜集 --子域名

1.证书查询 通过ssl证书指纹在crt.sh |证书搜索网站搜索 这些就是证书一样的 2.fofa等空间测绘平台查询 3.dns查询 https://dnsdumpster.com/ 4.威胁情报中心 360 微步等等 5.枚举 暴力破解 工具推荐:oneforall GitHub - shmilylty/OneForAll: OneForAll是一款…

QUIC(Quick UDP Internet Connections)与 RTMP(Real Time Messaging Protocol)

QUIC(Quick UDP Internet Connections)和 RTMP(Real Time Messaging Protocol)是两种不同的网络传输协议,它们在一些方面有不同的特点和应用场景。 QUIC 协议 特点 基于 UDP:QUIC 建立在 UDP 之上&#xff…

Bayes-CNN-LSTM|基于贝叶斯优化的卷积-长短期神经网络多输入数据回归预测

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、方法原理介绍: 四、完整程序下载: 一、程序及算法内容介绍: 基本内容: 本代码基于Matlab平台编…

spark:数据的关联与合并、缓存和checkpoint

文章目录 1. 数据的关联与合并1.1 join关联1.1.1 内关联1.1.2 左关联1.1.3 右关联 1.2 Union合并 2. 缓存和checkpoint 1. 数据的关联与合并 1.1 join关联 students表数据: 1.1.1 内关联 内关联只返回两个 DataFrame 中在连接键上匹配的行。 # join 关联 from…

Microsoft Visual Studio当程序中用了try catch ,如何定位到出错的地方。

在Microsoft Visual Studio中,当用了try catch的时候,程序报错一般会抛出异常到前端,无法捕捉到源代码的地方。这时候只要设置调试就行。

java基本语法(二)

continue,break,return有什么区别 在循环结构中,当循环条件不满足或者循环次数达到要求时,循环会正常结束。但是,有时候可能需要在循环的过程中,当发生了某种条件之后 ,提前终止循环&#xff0…

安科瑞/ACREL能源管理软件能耗管理软件

综合智慧能源管理系统的参与方很多,包括电网、能源服务商、大中小微用能企业甚至个人等,这是一个需要多方参与的系统,系统要有很好的兼容性和易用性。首先,系统的设计需要支持多种工业接口的应用,如第三方系统接口、智能感知设备接口以及用能…

【从零开始的LeetCode-算法】3195. 包含所有 1 的最小矩形面积 I

给你一个二维 二进制 数组 grid。请你找出一个边在水平方向和竖直方向上、面积 最小 的矩形,并且满足 grid 中所有的 1 都在矩形的内部。 返回这个矩形可能的 最小 面积。 示例 1: 输入: grid [[0,1,0],[1,0,1]] 输出: 6 解释&…

Xshell使用密钥远程登录Ubuntu 22.04报错:所选的用户密钥未在远程主机上注册。请再试一次

报错截图如下: 问题原因: Ubuntu 22.04 不支持 Xshell使用的私钥。 查看系统支持的私钥:sudo sshd -T | egrep "pubkey" ~$ sudo sshd -T | egrep "pubkey" pubkeyauthentication yes pubkeyacceptedalgorithms ssh-ed…

一字线激光模组在道路检测方面的应用

在现代道路检测领域,一字线激光模组作为一项先进的检测技术,正发挥着越来越重要的作用。这一技术以其独特的优势,为道路检测提供了更为精准、高效的解决方案。接下来我们就一起了解一下关于一字线激光模组在道路检测方面的应用。 一字线激光模…

号码品牌认证是什么?为什么我的号码总被错误标记?

电话营销,听起来十分简单,但想要让客户接听并听完您的介绍,可没那么容易。今天,我就来分享几个让客户“不拒绝”的小技巧。 首先,您可以选择使用号码品牌认证服务,在您拨打电话时,它就像给您的电…