本文主要是分享一下思路的,如不想看可以直接跳到最后。
做项目时有一个在左上角添加logo的需求,但是element-admin貌似没有添加logo的位置,于是我先在页面中检查侧边栏,发现它是sidebar-container类。
于是我在vscode中直接全局搜索sidebar-container,发现它放在了src/layout文件夹下
打开文件之后发现它实际是layout/components下的SideBar组件
打开layout/components/Sidebar/index.vue文件,发现有一个showLogo控制logo显示。
往下浏览文件找到showLogo方法,可以看到它返回一个存放在Vuex中已注册模块settings中的一个状态。
打开src/store/index.js,发现了settings模块以及它的存放路径。
打开./modules/settings.js文件,能够看到sidebarLogo是从src/settings中解构得到的。(@是alias,默认src)
打开src/settings.js文件,我们终于找到了element-admin配置logo的位置,即sidebarLogo:false这一行。
显然,只要将这里的sidebarLogo改为true,就可以在左上角显示logo了。
如果想要自定义logo的话,可以src/layout/Sidebar/Logo.vue文件中配置logo的地址,本地和url都可以,title就是在logo后面跟随的标题。
element-admin默认设置的logo大小为32*32,如果想要修改logo的大小,可以在Logo.vue文件中修改以下样式。
修改width和height就可以改变logo大小了,也可以直接注释掉。
其实呢,这并不是什么大问题,主要是想分享一下解决问题的思路,毕竟主动解决问题的能力是很宝贵的。