关于Antd3导航收缩后图标右侧出现箭头问题
项目开发过程中总会遇见各种各样奇奇怪怪的bug,今天小编遇到了一个和Antd3导航收缩后图标右侧出现箭头问题:
正常情况下,Antd3导航收缩后图标应该是这样的:
然后反反复复的检查,发现代码都是对的,通过开发者工具也检查了一次,与官网的代码也做了对比,发现除了导航栏每一行多了div,其他都没啥大问题,感觉多了个div应该问题不大,然后又反反复复的看了代码,最后拿去和以前写的做对比,发现还是div的问题,然后把div干掉以后,图标就恢复正常了,很显然,问题就是应为多加了个div。
<!--最开始有问题的代码 -->
<template>
<div class="mj-menu-item">
<template v-for="items in menus">
<template v-if="items.meta.display">
<a-menu-item v-if="!items.children" :key="items.path">
<template #icon v-if="items.meta.icon">
<svg-icon :icon_name="items.meta.icon" />
</template>
{{ items.meta.text }}
</a-menu-item>
<a-sub-menu v-else :key="items.path">
<template #icon v-if="items.meta.icon">
<svg-icon :icon_name="items.meta.icon" />
</template>
<template #title>{{ items.meta.text }}</template>
<mj-menu-item :menus="items.children" />
</a-sub-menu>
</template>
</template>
</div>
</template>
<!--修改后的代码 -->
<template>
<!-- 把这里的div干掉 -->
<template v-for="items in menus">
<template v-if="items.meta.display">
<a-menu-item v-if="!items.children" :key="items.path">
<template #icon v-if="items.meta.icon">
<svg-icon :icon_name="items.meta.icon" />
</template>
{{ items.meta.text }}
</a-menu-item>
<a-sub-menu v-else :key="items.path">
<template #icon v-if="items.meta.icon">
<svg-icon :icon_name="items.meta.icon" />
</template>
<template #title>{{ items.meta.text }}</template>
<mj-menu-item :menus="items.children" />
</a-sub-menu>
</template>
</template>
</template>
学习分享,一起成长!以上为小编的经验分享,若存在不当之处,请批评指正!