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.0使用taro-ui-vue3引入组件不生效的问题及解决
这篇文章主要介绍了vue3.0使用taro-ui-vue3引入组件不生效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
el-select如何获取下拉框选中label和value的值
在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下
2022-10-10
关于console.log打印结果是 [object Object]的解决
这篇文章主要介绍了关于console.log打印结果是 [object Object]的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现自定义多选与单选的答题功能
这篇文章主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令，非常好用，具体实现过程大家跟随脚本之家小编一起看看吧
2018-07-07
vue-cli3项目在IE浏览器打开兼容问题及解决
这篇文章主要介绍了vue-cli3项目在IE浏览器打开兼容问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
前端启动出现报错提示vue-cli-service serve的原因及解决办法
这篇文章主要给大家介绍了关于前端启动出现报错提示vue-cli-service serve的原因及解决办法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
vue-cli配置环境变量的方法
本篇文章主要介绍了vue-cli配置环境变量的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
element-ui 实现响应式导航栏的示例代码
这篇文章主要介绍了element-ui 实现响应式导航栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vue实现组件间通信的几种方式(多种场景)
本文主要介绍了Vue实现组件间通信的几种方式，不同的场景使用不同的方式，基本满足所有开发场景中的通信需求，感兴趣的可以了解一下
2021-10-10
Vue基于localStorage存储信息代码实例
这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11