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;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue组件开发props验证的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了Vue中SSR的作用及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了nuxt 页面路由配置,主页轮播组件开发操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了使用Vue-axios进行数据交互详情，文章围绕Vue-axios进行数据交互的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习或工作有所帮助2022-03-03
vue elementUi+sortable.js实现嵌套表格拖拽问题
这篇文章主要介绍了vue elementUi+sortable.js实现嵌套表格拖拽问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue3 高德地图关键词搜索获取经纬度的示例代码,需要的朋友可以参考下2024-08-08
这篇文章主要给大家介绍了关于elementUI中Table表格问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要为大家介绍了vue新建环境变量以及网络请求工具axios的二次封装详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
在Vue中通过Mustache模板引擎将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache模板引擎插值语法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了uniapp 拖拽图片排序功能实现类似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,图片数组的插入排序,另一部分是上传加号图片的 定位 动态计算分为几列,每一个图片大小的位置 绝对定位的计算,需要的朋友可以参考下2024-07-07
最新评论