只要更改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;
}