vue-ant框架 - a-menu -关于更改munu的icon为自定义图标
只要更改i-con 去掉type,改为自己class样式 原项目 <a-menu-item key="/ManageProject" @click='navSelect("/ManageProject")'>
<router-link to="/ManageProject">
<a-icon type="folder-open" />
<span>项目管理</span>
</router-link>
</a-menu-item> 注意不要去掉a-icon直接改为i标签或其它图标常用标签如a 如果自定义标签的引入-去掉a-icon标签那么设定完图标后会出现连锁问题 问题1: 鼠标移动上去后不再高亮字体 问题2: 点击则爹面板后图标旁边的标题(如项目管理)不会隐藏 可以通过判断collapsed值展开显示折叠隐藏 <span :class="{ mydisplaynone: collapsed}">系统管理</span> 问题3: 当解决问题2后因为折叠隐藏导致鼠标移动上去后折叠效果的导航浮框内没内容了 可以通过设置a-menu-item上设置title="想要显示出来的文字描述"来解决 <a-menu-item title="系统管理" key="/System" > 这样添加title的话又会出现问题:浮框出现两个,原始框架的title和自定义出现title 因此需要按框架上面的结构不去更改它而是直接他在a-icon上加class 一定要注意去掉type,否则会出问题 例如 <a-menu-item key="/ComYibiao" @click='navSelect("/ComYibiao")'> <router-link to="/ComYibiao"> <a-icon class='myIcon yibiaopanIcon'> </a-icon> <span>仪表盘</span> </router-link> </a-menu-item> css: .myIcon{ display: inline-block; width: 1.3em; height: 1.3em; fill: currentcolor; background: red; margin-right:0.8em; margin-top:-0.2em; vertical-align: middle; } .yibiaopanIcon{ background: url(../assets/image/icon/yibiaopan2@2x.png); background-size: cover; background-repeat: no-repeat; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!