Ant Design Vue侧边栏收缩的一个小坑~

116 阅读2分钟

你们好,我是金金金。

image.png

场景

我的
image.png

官方文档例子
image.png

  • 侧边栏收缩状态下,可以看见我的项目 竟然多个... 和 一个箭头,和官方文档的例子显然不一样

排查

排查之前我先贴一下代码

image.png

  • index.vue image.png

  • SiderMenu.vue image.png

  • SiderMenuItem.vue image.png

我大概捋一下我这的思路,我是在侧边栏组件里面拆分放了2子组件

  1. 侧边栏的logo组件
  2. 侧边栏的菜单组件
  • 重点在菜单组件里面,可以很清晰的看见我是在a-menu这个标签里面写了一个sider-menu-item组件,我这里是把数据都传给sider-menu-item组件,sider-menu-item组件去处理数据以及渲染菜单。

我有多次对比文档中的例子、也有f12检查元素,文档中的例子收缩状态下是没问题的,不过文档的例子没有拆分出子组件,然后我猜想问题是不是出在sider-menu-item组件上,我sider-menu-item组件最外层是一个div标签包裹起来,我尝试把最外层的div标签去掉,惊奇的发现 箭头和省略号竟然没了,说明确实这里有问题,不过又发现多了好几个菜单,这是因为我div上面的判断条件就是hidden属性为ture的不显示,所以需要将最外层的div标签替换成template标签

造成error的原因

  1. sider-menu-item组件最外层div标签所导致
  2. icon组件和title不能写一个span标签里面

解决

  • 我们知道导致问题的原因是sider-menu-item组件最外层的div标签导致,我们改成template标签即可。 image.png

image.png

问题得以解决,又发现一个新问题,怎么多出来个文字呢?问题立马锁定在渲染标题这一块的标签,我再次对比了文档中的例子

image.png

image.png

  • 咱们改一下代码,效果正确。问题解决。

image.png

image.png

总结

主要是sider-menu-item组件最外层div标签影响到了样式,再者就是细心问题,我把icon组件和title写在一个span标签里面所导致。

  • 编写有误还请大佬指正,万分感谢。