热门标签
热门文章
- 1存算一体与存内计算计算杂谈
- 2【Java基础项目】经典小游戏黄金矿工制作_黄金矿工项目任务书
- 3【SpringBoot学习】23、SpringBoot 防止SQL注入、XSS攻击、CSRF/CROS恶意访问_hyperf 这个类获取接口传入的参数能 预防 sql 注入、xss 攻击、csrf 攻击
- 4Unity中的SendMessage使用 (发送消息与接收消息)_uni.sendmessagetowindow
- 5Sqoop 入门基础
- 6《python从入门到实践》图书配套资源下载方式 飞船图像下载_ship.bmp怎么下载
- 7Element table组件内容\n换行解决办法_el-table 换行
- 8程序员的养生之道：远离猝死、脱发、身体虚的尴尬人生_程序员如何锻炼身体
- 9paddleocr打包exe全过程详细介绍，包括遇到的问题及解决方案_modulenotfounderror: no module named 'imghdr
- 10Android 设置秒开全屏启动屏_安卓广告机开机全屏网页
当前位置: article > 正文
element-admin 菜单栏点击更改icon图片_el-menu-item 更改图标
作者：花生_TL007 | 2024-02-19 06:49:14
赞
踩
el-menu-item 更改图标
element-admin 菜单栏点击更改icon图片（干货）
由于我们公司项目最近有个需求，项目使用element-admin模板，需要点击更改菜单栏的icon图片。网上找了很久都没有找到解决办法，最后决定在路由中设置两个icon如图：
然后在SlidebarItem.vue中，根据路由的名称，和当前路由的icon是否和路由中的icon比较，如果相同则显示icon1的图片
以下是我的源码
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item v-if="item.meta.icon1" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item v-if=" ($route.name === item.name&& $route.meta.icon === onlyOneChild.meta.icon) || ($route.name === item.name &&$route.meta.icon === (item.meta&&item.meta.icon))"
:icon="onlyOneChild.meta.icon1||(item.meta.icon1)" :title="$t(onlyOneChild.meta.title)" />
<item v-else :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t(onlyOneChild.meta.title)" />
</el-menu-item>
<el-menu-item v-else :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t(onlyOneChild.meta.title)" />
</el-menu-item>
</app-link>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/113203
推荐阅读
相关标签
