0 环境
1 参考文档
2 前言
要想在线看源码的，请点开上面的参考文档 LayoutVertical/index.vue 查看具体源码，本地的源码位置：src/layouts/LayoutVertical/index.vue ，进入这个vue文件后，找到第29行ToolBarLeft(上面有在线链接，本地位置：@/layouts/components/Header/ToolBarLeft.vue)组件，点进去后即可，之后就讲该组件，如下图所示。
3 ToolBarLeft.vue
如下图：
div有个样式，它下面包裹了两个组件(CollapseIcon和Breadcrumb)，看下面第二张图，其实是这两个。
1 div样式
看上图：tool-bar-lf做的事情，很简单就是水平垂直居中，不换行，多了部分就隐藏。
2 CollapseIcon
找到CollapseIcon，点进去，如下图：
首先看到一个类，设置与右边图标的边距，图标变大，color里var是自定义的颜色变量，前面有讲过，请看下图headerTheme，现在类别是light，那么前景色就是#303133，手型。然后changeCollapse事件做了什么呢，点击后，对globalStore 里isCollapse的值做取反操作。下面的图标也是跟着这个变量变换，而做切换。顺便提一下：这里就是控制侧边栏的宽度的以及侧边栏的图标的显示隐藏，看下面第三和第四张截图。
4 总结
纵向header被分为了2块。现在分析的是左侧的组件(包含2个组件)，这里主要介绍了
CollapseIcon组件，它主要做了：加了些样式的细节，主要是changeCollapse事件关联了globalStore.isCollapse，事件被点击后，不仅仅是图标发生了变化，而且侧边栏宽度也会发生变化(el-menu中的:collapse，其实logo图标也会跟着显示/变化)。