修改elementui的导航菜单样式,悬浮、聚焦、失焦,超方便

最近工作中用到饿了么中的导航菜单,原悬浮背景色不符合要求,且失焦后,无背景色,文档中居然没有给修改这些的接口。。。急得我要去改源码了,但是吧,,看了看源码我又放弃了,我觉得还不如自己重新写…这个问题放了两三天,今天又看了看,突然发现浏览器的一个小功能,以前居然都不知道。

在这里插入图片描述
想要的其实就是原生写的hover,点击这里,就能在下面看到,把一长串的类名复制到页面,然后写样式就行了。
在这里插入图片描述
导航菜单这里改背景色还有个更简单的方式,点击几次dom,发现饿了么是通过is-active这个类名去控制背景色的,所以直接用is-active去修改背景色就可以了。
小公司没有大佬带。。一切都靠自己摸索~~
== 有用点个收藏吧,火鸡们,集美们 ==

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要实现自定义的icon,可以按照以下步骤进行操作: 1. 将UI提供的常规、选中、鼠标悬浮三种状态的小图标切好,并保存为相应的图片文件。 2. 在项目中引入这些图片文件,可以通过`import`语句或者直接在HTML中使用`<img>`标签。 3. 在NavMenu组件中,使用`slot`插槽来自定义每个菜单项的内容。可以在插槽中使用`<img>`标签来展示对应的图标。 4. 根据需要,可以使用CSS样式来调整图标的大小、颜色等样式属性。 这样就可以实现自定义的icon效果了。 参考资料: - ElementUI官方文档中关于NavMenu的使用:\[ElementUI - NavMenu\](https://element.eleme.cn/#/en-US/component/menu) - 一篇关于使用ElementUI中NavMenu的博客文章:\[ElementUI中El-menu导航栏\](https://blog.csdn.net/qq_40323256/article/details/125212606) \[2\] #### 引用[.reference_title] - *1* [修改elementui导航栏样式](https://blog.csdn.net/weixin_38680881/article/details/115961213)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Elementui中El-menu导航栏](https://blog.csdn.net/qq_40323256/article/details/125212606)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值