VUE+ElementUI更改导航菜单选中背景颜色
VUE+ElementUI更改导航菜单选中背景颜色
主要是设置 .el-menu-item.is-active 选择器的样式属性
官方文档中提供background-color、text-color、active-text-color三种属性
仅提供了激活菜单文字颜色,并没有提供激活菜单的其他参数
<el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="collapsed" background-color="#fff" text-color="#777F8F" active-text-color="#6681FA">
使用提供的属性,并设置 .el-menu-item.is-active 样式
可以看到我们使用了提供的参数之后,是JS直接更改了HTML样式,由于权重较低css样式失效了.el-menu-item.is-active,菜单背景色background-color 覆盖 激活菜单背景色 background-color
使用 !important 优先级最大 可以实现
.el-menu-item.is-active { color: #6681FA; background-color: #EAEEFF!important; }
以上方法不推荐使用,两点原因,第一点js和css混合使用增加耦合度,第二点使用 优先级最大 的方法覆盖原有框架增加了后期维护难度。
以下方法解决
推荐不使用官方提供的属性,直接使用css即可,注意书写顺序
.el-menu-item { color: #777F8F; } .el-menu-item.is-active { color: #6681FA; background-color: #EAEEFF; }
css样式直接使用类选择器解决耦合或继承性问题,类选择器的权重为1,增加自定义 class 可轻松解决,如果有js改变样式的情况,可以增加 js 钩子方便维护也适用复杂场景,例:.js-show

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
全景还原报错现场 | 应用实时监控 ARMS 上线用户行为回溯功能
随着前端技术日新月异迅猛发展,为了实现更好的前端性能,最大程度提高用户体验,支持单页应用的框架逐渐占领市场,如众所周知的React,Vue等等。但是在单页应用的趋势下,快速定位并解决JS错误却成为一大难题。在当下的互联网行业,对前端性能要求越来越高,前端性能监控的产品层出不穷,javascript错误诊断更是其中举足轻重的一个环节。帮助开发者排查线上bug,实现快速定位问题,高效解决问题,是我们努力的方向。 一、JS错误诊断 目前已经有了许多诸如Arms,Sentry等前端性能监控框架,都在一定程度上对JS错误诊断提供了相应的 支持,总体来说,大家的思路比较相似,可以总结为以下几个步骤: 1. 统计JS错误 每当上线一个新的产品或新的业务功能,往往伴随着一些不可避免的线上bug,这些bug发生的频率有多高、发生在什么页面、影响了多少用户等
- 下一篇
VUE 路由参数动态变化,刷新页面动态变化
VUE 路由参数动态变化,刷新页面路由参数动态变化,子组件获取路由参数 场景:响应路由参数变化,当使用路由参数时,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过组件的生命周期钩子不会再被调用。注意:使用 param 传参需要提供路由 name ,使用 query 传参需要提供路由 path 。 路由传参用到了编程式导航 // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 复用组件时,对路由参数的变化作出响应,可以简单地 watch (监测变化) $route 对象:router/index.js const router = new Router({ ...
相关文章
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果