vue之el-menu-item如何更改导航菜单栏选中的背景颜色

更新时间：2023年05月22日 15:08:27 作者：maidu_xbd

这篇文章主要介绍了vue之el-menu-item如何更改导航菜单栏选中的背景颜色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

el-menu-item更改导航菜单栏选中的背景颜色

修改element导航栏选中时的背景色，可以通过设置 .el-menu-item.is-active 选择器的样式属性【background-color】使用 !important 使得优先级最大。

如下：

.el-menu-item.is-active {
      background-color: #3370ff !important;
      color: #fff;
      span {
        color: #fff !important;
      }
    }

element的导航栏修改其选中时颜色的问题

修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。

于是……

.el-menu-item.is-active {
  background: #247bb4 !important;
}

以为完事了吗？

不不不

正常使用时效果确实达到了

但是长时间闲置页面，再回头看这个页面时会出现

哪里来的灰色？？？

鼠标点击界面任意位置，灰色立马消失……

我……

疯狂百度，没人有这种情况

但是看到别人的代码如下：

.el-menu-item.is-active {
  background-color: #247bb4 !important;
}

于是尝试着用background-color替换background

好像还真的OK了再也没出现过如上情况了

然后过了好几个月，发现这个现象还是存在

一次偶然的机会，被我捕获到了问题哈哈哈

莫名其妙这个时候会给当前元素加上background-color: rgb(204, 204, 204);

然后只要点击屏幕，瞬间这个值会变成background-color: rgba(0, 0, 0, 0.1);

所以，我只要给它默认设一下背景色就好了啊！！！

修改代码如下：

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

这次是真的OK了！！！

心塞啊心塞，这个还是没解决

因为直接强制修改el-menu-item的背景色，会导致想要它变色的时候变不了了啊啊啊，脑壳痛。

直接看最终样式修改

因为需要菜单透明，于是乎这么设置以后很久没有给我蒙上一层灰了。

<el-menu router class="el-menu-vertical-demo menu-Bar" background-color="rgba(36,123,180,0.51)" text-color="#b4dbf4" active-text-color="#7BE4FF">
  <navMenu :navMenus="menuData"></navMenu>
</el-menu>
.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item.is-active {
  background-color: #247bb4 !important;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Vue3中Watch监听事件的使用
这篇文章主要为大家详细介绍了Vue3中Watch监听事件的使用的相关资料，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下
2023-02-02
Vue路由vue-router详细讲解指南
这篇文章主要介绍了Vue路由vue-router详细讲解指南，对vue-router感兴趣的同学，可以参考下
2021-04-04
vue自定义实例化modal弹窗功能的实现
这篇文章主要介绍了vue自定义实例化modal弹窗,Vue.extend 属于Vue的全局 api，在实际业务开发中我们很少使用，因为相比常用的 Vue.component写法使用 extend 步骤要更加繁琐一些，本文结合实例代码给大家介绍的非常详细，需要的朋友参考下
2022-09-09
Vue3 Transition组件给页面切换并加上动画效果
这篇文章主要给大家介绍了关于Vue3 Transition组件给页面切换并加上动画效果的相关资料,vue的过渡动画主要是transition标签的使用,配合css动画实现的,需要的朋友可以参考下
2023-06-06
详解如何在vue项目中使用layui框架及采坑
这篇文章主要介绍了vue使用layui框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue element 中的table动态渲染实现（动态表头）
这篇文章主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue动画打包后失效问题的解决方法
这篇文章主要介绍了vue动画打包后失效问题的解决方法,在文中给大家提到了vue-cli 打包后自定义动画未执行的解决方法，需要的朋友可以参考下
2018-09-09
在vue3项目中给页面添加水印的实现方法
这篇文章主要给大家介绍一下在vue3项目中添加水印的实现方法,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧
2023-08-08
keep-Alive搭配vue-router实现缓存页面效果的示例代码
这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
浅谈vue-props的default写不写有什么区别
这篇文章主要介绍了浅谈vue-props的default写不写有什么区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08