vue3后台管理框架geeker admin -- ThemeSetting初探

0 环境

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

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

ToolBarRight.vue

useUserStore

mitt

2 前言

找到ToolBarRight.vue中的ThemeSetting，点进去，参考下图。

3 正文

你会发现ThemeSetting.vue内容很少，就是图标 + 一个click事件，那么openDrawer做了什么，看上去只有个一行代码，发出事件。

点进mittBus看下，只是一个创建的过程。

那么重点就在于openThemeDrawer了，它对应的监听在下图这个位置，后续就是ThemeDrawer具体vue实现以及它的样式剖析了。

4 总结

这里的主题界面是单独一个页面控制的，通过监听、触发来，控制这个单独页面。