问题:自定义菜单图标时收起菜单文字不隐藏问题
<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://i-blog.csdnimg.cn/blog_migrate/bfd39a3a731eaa08f2b51333df47d713.png)
解决:在自定义图标外面加一个.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://i-blog.csdnimg.cn/blog_migrate/b3862f9afbfe30ad693fdfe2cf030d91.png)
原因:隐藏是通过.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://i-blog.csdnimg.cn/blog_migrate/b33f84630702b9c395a853d4cbf61835.png)
- css
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2dcb68db4d9f6571520c086368c00a1b.png)