如何在项目中使用设置el-menu的菜单高亮效果

最新推荐文章于 2024-07-04 14:11:39 发布
最新推荐文章于 2024-07-04 14:11:39 发布
阅读量1.1k 收藏 1
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52765288/article/details/120816315
版权

1.使用调试工具找到高亮类名

 

 2.找到控制侧边栏的样式模块

3.修改样式

修改高亮类名的背景颜色  以及字体的文字颜色 还有scg图标的颜色 

·前端小李
关注
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8241
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
el-menu 菜单组件的优化
Beam
08-23 1829
问题： 选中菜单，路由跳转了，但需要点击两次才有选中的颜色。 F12查看，第一次点击时没有绑定上.isactive，第二次点击才绑定该样式。 原来使用router模式是没有这个问题的，但是现在不用router模式，通过select方法跳转路由。 原因： router模式下，路由根据index绑定值进行跳转。 而index绑定值需要唯一，如果存在路由为空串’'容易出现点击空串的节点展开了全部等问题。 并且系统中容易出现路由不唯一的情况，只有code\id\sn才能保证唯一性。 于是只能舍弃router模式，@
Element UI 菜单高亮设置
qq_40678503的博客
10-22 2765
其实这个功能在element ui官方文档中有写 其实主要是这两个属性 <el-menu :default-active="$route.path" router> <el-submenu index="1"> <template slot="title"> <span>菜单栏</span
elementUI，el-menu菜单栏高亮
m0_69839414的博客
02-09 343
选择和页面刷新后当前页高亮(而不是回到特定页面)
【Vue3】el-menu的踩坑和使用
最新发布
小安驾到的博客
07-04 1976
el-menu一些小技巧，满足更多少见需求！
el-menu设置侧边栏使选项默认高亮与当前网址一致
LK_315的博客
07-14 1836
使用el-menu实现侧边栏激活选项与当前页面网址一致的功能
Vue el-menu高亮设置及点击菜单项实现路由跳转
热门推荐
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
一菜单栏页面点击跳转另一菜单的页面时,菜单栏的高亮显示也随之跳转
CYY941027的博客
06-15 779
1.先根据元素选中父页面(".subli",parent.document)2.因为我这边是跳转到第一个菜单栏所以(".subli", parent.document) 2.因为我这边是跳转到第一个菜单栏所以(".subli",parent.document)2.因为我这边是跳转到第一个菜单栏所以(".subli", parent.document).first() 3添加高亮样式$(".subli", parent.document).first( ).addClass(“menuChange”) 4因为
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据当前路由动态设置选中和展开...
element-ui el-menu 刷新保持高亮的写法
Libra_rookie的博客
05-14 1290
<el-menu :default-active="$route.path" :router="true" :unique-opened="true" background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b"> <!--router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径，字符串，绝对路径--> <!--unique-opened只允许有
el-menu设置高亮
07-27
首先，在el-menu组件中设置default-active属性为当前网址的路径，即this.$route.path。这样就能实现页面跳转后，侧边栏对应选项高亮。\[1\]其次，在生成的el-menu-item组件中设置index属性为该选项对应的路由路径，...
Vue中使用el-menu，点击二级菜单时一级图标保持高亮
Oamnij的博客
09-24 8503
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
element导航栏控件 点击导航栏也可正常高亮，但是页面点击发生跳转以后导航栏高亮没有发生变化
weixin_45646663的博客
09-16 561
1、绑定路由路径 :default-active="$route.path" 2、index=“路由路径” <el-menu menu-trigger="hover" style="left: -15%; position: relative;border-bottom: none;" popper-append-to-body="false" icon="iconfont iconxiala" ref="NavMenu" background-color="#0C48E5"
el-menu自定义控件，点击菜单栏/自动跳转时切换高亮
x_hxs的博客
11-30 816
【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮
黎明总是如期而至
09-01 1893
el-menu 是element-ui的菜单组件，为网站提供导航功能的菜单。
设置高亮当前菜单项
weixin_57334089的博客
10-18 1065
目标 当左侧的某一菜单处于选中状态时，对它高亮显示 分析 当某个菜单处于选中状态时，el-menu自动会有一个特殊的类.is-active，所以我们补充一个css类就可以了。 操作 在 src\styles\sidebar.scss文件中， 在el-menu下添加一个is-active类，样式如下 .el-menu { // 省略其他 .is-active { background-color: $menuText !important; span{ col
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 1043
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
Vue中使用el-menu高亮显示问题
weixin_43336525的博客
08-28 2473
在Vue项目中使用了el-menu，需求：进入该页面默认的el-menu-item高亮显示，且点击el-menu-item时路由发生变化，点击的item高亮显示
element plus 中menu菜单项不高亮
m0_51607474的博客
05-29 731
动态添加类名，当跳转路由的名字与路由的名字相同时，给class添加is-active类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值