vue3 后台管理框架geeker admin -- 纵向布局：侧边栏代码剩余样式补充(了解)
0 环境
1 参考文档
2 前言
要想在线看源码的，请点开上面的参考文档 SubMenu.vue查看具体源码，本地的源码位置：src/layouts/components/Menu/SubMenu.vue，下面我就会直接用SubMenu.vue替代了。而我们主要讲的是scss样式，也就是36-85行的内容。
3 简单对比分析
SubMenu.vue里的 scss样式(36-85行) 注释前和注释后的区别，就多了选中后的背景色的，其它的看不出来，那只能看源码一个个测试了。
4 scss样式代码分析
1 scss代码
一种看这张图片，要么找到上面参考文档中的SubMenu.vue或者本地的SubMenu.vue，具体参考前言的内容
2 剖析scsss
先看scss下的36-39行，就是一个hover设置前景色和设置元素的背景颜色为透明。这里我加个color红色，所以多了一行，加它是为之后测试的时候看着明显。从代码就能猜出是hover时，子菜单变色。
最终可以看到子菜单hover就变红了，到最后的菜单项是没受影响的。这里的 --el-menu-hover-text-color 是自定义的，后续后详说的。参考下图。
在侧边栏是收缩且子菜单有菜单项被选中的时候，子菜单的前景色和背景色会被改变。你可以f12，输入el-menu--collapse查看结果，到时候对比一下就清楚了。参考下图。
再看 .el-menu-item代码，参考下图，我们就知道它是菜单项，大概能猜到是对鼠标放上去或者点击时触发的效果。
首先我先改变hover前景色的颜色，确实改变了。如下图所示。
选中后的样式，是不是也跟着我设置的属性变了。
现在我们观察四种布局，选中某个菜单项时，会出现一个有绿色的宽度、高度的竖纹，但在非分栏和分栏布局中，它们的样式是一样的，但是定位的位置是不一样的。
纵向和经典差不多，我一张图代表它俩的样式和位置。如下图：
这是横向布局的时候，它的竖条的位置也是在最左边的。看下图：
当是分栏时，它设置的是在最右边。如下图：
由于它们布局的样式是一样的，但是它们的位置是不同，只要把位置抽成两个即可，
下图的代码，指的是它们的样式，别忘记了它是在激活的状态下，才会设置绝对定位，top和bottom为0，设置了它的高度，设置竖条的宽度，内容为空，设置背景颜色。
再来仔细思考一下，你会发现这里只有一个绝对定位，但是也没发现上面的scss样式中有祖先定位元素，其实默认是有定位的，有一个相对定位的。如下图：
这里的代码就是设置它的在左还是在右的位置，其实也没啥说的，假如你不喜欢在右的，完全可以把分栏的布局加到left:0这项中。
还有一个菜单有个标题的样式定义，类名叫sle，但是在下面的scss中没找到它的样式，结合下图和你自己scss代码：
其实它被定位为一个公共的scss样式了，具体位置是在@/styles/common.scss中，它定义的样式内容其实就是内容多了省略号，且不换行。如下图：
5 总结
这里的scss代码其实只是对menu菜单进行一些样式的改变，比如hover和is-active以及收缩菜单，总之以后遇到侧边栏menu菜单样式的调整，就可以在这里修改，正常无需修改，了解即可。
转载自:https://juejin.cn/post/7370906781386326050