问题:自定义菜单图标时收起菜单文字不隐藏问题
<a-menu-item v-for="item in memberMenu" :key="item.path">
<i :class="['iconfont', item.icon]" style="marginRight: 10px;fontSize:20px;"></i>
<span class="">{{ item.title }}</span>
</a-menu-item>
- 效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200901163227541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdodW9jYw==,size_16,color_FFFFFF,t_70#pic_center)
解决:在自定义图标外面加一个.anticon的span
<a-menu-item v-for="item in memberMenu" :key="item.path">
<span class="anticon">
<i :class="['iconfont', item.icon]" style="marginRight: 10px;fontSize:20px;"></i>
</span>
<span class="">{{ item.title }}</span>
</a-menu-item>
- 效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200901163534647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdodW9jYw==,size_16,color_FFFFFF,t_70#pic_center)
原因:隐藏是通过.anticon+span找到的
<a-menu-item v-for="item in memberMenu" :key="item.path">
<a-icon :type="item.icon" style="fontSize:20px;" />
<span>{{ item.title }}</span>
</a-menu-item>
- DOM结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200901164220943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdodW9jYw==,size_16,color_FFFFFF,t_70#pic_center)
- css
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200901165115807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdodW9jYw==,size_16,color_FFFFFF,t_70#pic_center)