侧边栏隐藏后,图标消失了

Question

应该是被顶掉了

Answer 1

Lemon甜橙君 2022-03-22 18:28:06

我也出现了这个问题，用的版本是2.x.x经过排查之后，发现在在折叠的时候，element会自动将【<el-menu-item>中的】<template #title>中的内容隐藏掉，而视频里在最开始，把图标和文字，都放在了#title中，所以图标才会消失，解决方法的话就是将图标写在<template #title>的外层即可

• Sunday #1

  该问题已经更新了对应的解决视频，具体可查看 13章新增视频内容。

Answer 2

coderK 2023-03-03 09:15:27

我也是这种情况，项目引入的element-plus ^2.0.4，参考了13章视频加了样式也没用。现在已经解决了，在MenuItem.vue里的svg-icon外层加一层<el-icon>即可。但是展开时图标会缩小，需要添加样式。加了样式侧边栏收缩时图标还会贴在右边，需要去掉margin-right: 0px的样式

...<el-icon :size="size" :style="{ width: width }"><svg-icon...

我是这样处理的，不知道有没有更好的方法...

Answer 3

Sunday 2022-01-04 09:56:42

你好
这里需要看一下你的dom，你可以在浏览器中审查元素进行查看。注意：尽量使用课程中的element版本

• 提问者 乔刻力 #1

  我这里多加了一个样式
  :class="openedState ? 'sub-el-icon' : 'sub-hide_el-icon'"
  
      .sub-el-icon {
        margin-right: 12px;
        margin-left: -2px;
      }
      .sub-hide_el-icon {
        margin-right: 0px;
        margin-left: 0px;
      }

• Sunday 回复 提问者 乔刻力 #2

  如果是这样的话，那么就需要 debug（审查元素） 一下样式区域了