Vue-element-admin在左上角添加LOGO的方法

本文详细阐述如何在Element-Admin项目中调整logo显示和位置,包括定位到sidebar-container组件,修改Vuex状态,以及自定义logo路径和大小。适合开发者理解项目结构并解决此类需求。
摘要由CSDN通过智能技术生成

  本文主要是分享一下思路的,如不想看可以直接跳到最后。
  做项目时有一个在左上角添加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大小了,也可以直接注释掉。

  其实呢,这并不是什么大问题,主要是想分享一下解决问题的思路,毕竟主动解决问题的能力是很宝贵的。

  • 15
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值