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：icon图标库
当解决问题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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。