若依框架中对左侧菜单有集成的light和dark模式,如果需要添加新的菜单主题样式和背景色,下面的内容或许能提供帮助。效果示例图:
若依vue3版本
源码地址:https://gitee.com/y_project/RuoYi-Cloud
RuoYi-Cloud: 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统,同时提供了 Vue3 的版本
通过绑定handleTheme方法传入相应的主题名称,然后赋值给sideTheme,并存入localStorage内。
那么我们就模仿同样的结构新增一些结构,效果如下面展示:
当你点击原本切换的时候,观察sidebar元素的标签,会发生变化,变化的正是刚刚绑定handleTheme方法传入的主题名称。
所以我们就可以去找sidebar在的文件:layout/components/sidebar/index.vue
绑定的方法是这个:
可以在里面打印一下,验证自己新增的那些主题名称是否有传入成功;
如果成功了,那就简单多了,我们就可以通过判断class名称来给sidebar添加不同的样式和背景啦。
sidebar的样式文件在src/assets/styles/sidebar.scss
然后就可以这样设置里面的样式就可以啦,记得用!important
另外,variables.modules.scss文件里面是放一些公共的样式或者颜色;用$定义的颜色需要用:export导出。
也是同样的思路,在App.vue里面套一个div,动态绑定class名称,如上所示。
然后在assets/styles/index.scss文件里写相应主题class下的样式即可。
大体的思路已经结束了,至于具体样式就不多说了,根据自己的需求改就行了。大功告成,学废了吗!