操作步骤

1.添加自定义模板

src/layout/components/Settings/index.vue 目录下30行左右新增

         <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-blue')"><img src="@/assets/images/blue.svg" alt="custom"><div v-if="sideTheme === 'theme-blue'" class="setting-drawer-block-checbox-selectIcon" style="display: block;"><i aria-label="图标: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/></svg></i></div></div>

2. variables.scss

//新增样式名
$base-menu-blue-background:#0043B2;
$blue-sub-menu-background:#003793;
$blue-sub-menu-hover:#023281;//新增导出
:export {
......
menuBlueBackground:$base-menu-blue-background;
}

这里的变量名可以自定义，但还是要注意和后面的一一对应

3.Logo.vue

<template><div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground }"><transition name="sidebarLogoFade"><router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"><img v-if="logo" :src="logo" class="sidebar-logo" /><h1 v-else class="sidebar-title" :style="{color:(sideTheme === 'theme-dark' || sideTheme === 'theme-blue') ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1></router-link><router-link v-else key="expand" class="sidebar-logo-link" to="/"><img v-if="logo" :src="logo" class="sidebar-logo" /><h1 class="sidebar-title" :style="{ color: (sideTheme === 'theme-dark' || sideTheme === 'theme-blue') ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1></router-link></transition></div>
</template>

修改动态的style

4.Siderbar目录下的index.vue

//主要修改el-menu的这两个属性:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : settings.sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground":text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : settings.sideTheme === 'theme-blue' ? variables.menuColor : variables.menuLightColor"第2行修改<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : settings.sideTheme === 'theme-blue' ? variables.menuBlueBackground : variables.menuLightBackground }">

主题切换-效果图如下：

若依ruoyi左侧菜单栏增加新的主题色相关推荐

vue-element-admin左侧菜单增加新打开页面功能
route/index.js layout/components/SidebarItem.vue
在ECSHOP后台左侧导航中增加新菜单
在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程 / ecshop 教程网(www.ecshop119.com) 2011-11-08 有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...
左侧菜单栏左滑收起展开效果
上一篇文章左侧菜单栏折叠展开效果-超级简单介绍了将菜单列表上下展开的效果,这里在上一篇文章的基础上增加了左右折叠展开,有时候左侧菜单可能占了屏幕的一部分宽度,我们想把左侧菜单栏收缩起来以此让右边可视 ...
超级网管员原有QQ群己满，现增加新群
<超级网管员>原有QQ群己满,现在增加新群:6971910,请朋友们继续关注.
linux如何右键新建文件夹,在Ubuntu 18.04右键菜单中增加新文档(New Document)及其他类型选项...
本文教你在Ubuntu 18.04操作系统下使用命令操作在右键菜单中增加"新文档(New Document)"选项,包括为不同文件类型增加右键菜单选项的方法.起因是当我尝试创建一个 ...
python的继承模式_Python之继承--增加新功能，不更改以前的代码
在实际工作中,设计模式的时候,要增加新功能,不要更改以前的代码,这是封装和继承的高度总结. isinstance('对象',"类") 返回Ture or False issubcl ...
(笔记)Mysql命令grant on：增加新用户并控制其权限
grant on命令用于增加新用户并控制其权限. grant on命令格式:grant select on 数据库.* to 用户名@登录主机 identified by "密码" ...
【转】ABAP在表VBAP和VBAK上增加新字段的标准BAPI
[转载收藏] 在表VBAP和VBAK上增加新字段的标准BAPI 及实现方式: If you have custom ZZ fields on VBAP and VBAK then you can up ...
sap abap在表VBAP和VBAK上增加新字段的标准BAPI
在表VBAP和VBAK上增加新字段的标准BAPI If you have custom ZZ fields on VBAP and VBAK then you can update these fi ...

若依ruoyi左侧菜单栏增加新的主题色

自定义主题新增

操作步骤

1.添加自定义模板

2. variables.scss

3.Logo.vue

4.Siderbar目录下的index.vue

主题切换-效果图如下：

若依ruoyi左侧菜单栏增加新的主题色相关推荐

最新文章

热门文章