vue3后台管理框架geeker admin -- ThemeDrawer 标题界面设置 代码分析0 环境 Node.j
0 环境
1 参考文档
2 前言
找到ThemeDrawer/index.vue里的界面设置，这几个都只是绑定了v-model。
而且也能看出来它们是属于全局管理。如下图：
3 正文
下面演示的是纵向模式，先找到isCollapse对应的位置，src/layouts/components/Header/components/CollapseIcon.vue，这里的changeCollapse只是针对全局isCollapse做了取反操作，这里控制展开收缩的图标的实时变化。
继续找到src/layouts/LayoutVertical/index.vue，侧边栏根据真假得到是65px还是210px，然后文字是根据它的真假判断是否显示/隐藏，el-menu也会跟着它的真假变化，顺便提一下，菜单手风琴也是在这里绑定的（:unique-opened="accordion"）。
手印是在src/layouts/index.vue中使用的，有兴趣的可以点击看一下官方文档el-watermark，font代表字体，content代表水印文本内容。这里有个细节就是暗黑模式下，水印内容就会看不到，这也就是watch监听isDark的原因。
这里是控制面包屑的开关，如下图：
找到绑定的breadcrumb，就是下图的第四行代码，它控制着显示/隐藏。
面包屑图标的显示/隐藏，如下图：
具体代码在src/layouts/components/Header/components/Breadcrumb.vue，截图代码如下图：
一个是取反得到的css样式，只是改变位置、但元素在Y轴上继续保持原位置，具体修改自己看css，就不截图了。主要就是看v-if判断，存在才加载图标，否则不会加载。
找到src/layouts/components/Main/index.vue，这里标签栏图标显示/隐藏和页脚的显示/隐藏都在一块。如下图代码：
在src/layouts/components/Tabs/index.vue找到tabsIcon，v-if判断，是否加载图标。
4 总结
界面设置里的开关按钮绑定在
useGlobalStore中，只要找到它对应绑定的位置，大多做了v-if和v-show的判断，除了个别是宽度值的改变。
转载自:https://juejin.cn/post/7419925193677946899