vue3 后台管理框架geeker admin -- 纵向header ToolBarLeft组件 上

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

LayoutVertical/index.vue

ToolBarLeft.vue

图标

header.ts

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