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图标也会跟着显示/变化)。