若依VUE前后分离版本自定义主题风格
1.效果展示
2.操作步骤
2.1修改Navbar头部背景颜色
文件路径：src\layout\components\Navbar.vue
修改内容：设置头部背影颜色及右侧图标颜色
2.2 修改左侧图标颜色
文件路径：src\components\Hamburger\index.vue
<template>
<div style="padding: 1px 15px;" @click="toggleClick">
<i class="el-icon-s-fold hamburger" :class="{'is-active':isActive}" ></i>
</div>
</template>
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
color: #FFFFFF;
font-size: 20px;
}
2.3添加自定义主题风格
文件路径：src\layout\components\Settings\index.vue
新增一个主题风格选项，主要注意的是handleTheme里面的传参（后面会用到）和img的src图片，例如实例中的blue.svg
<!--自定义主题风格-->
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-blue')">
<img src="@/assets/images/blue.svg" alt="dark">
<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>
静态资源svg图片代码 放在src\assets\images 目录下
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-18" fill="#2f54eb" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
<rect id="Rectangle-11" fill="#2f54eb" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
</g>
</g>
</g>
</g>
</svg>
2.4 自定义样式
2.4.1 修改文件路径：src\assets\styles\variables.scss
// 新增菜单主题风格
$base-menu-blue-background:#2f54eb; //一级菜单颜色
$blue-sub-menu-background:#003793; //二级菜单展开颜色
$blue-sub-menu-hover:#023281; //二级菜单鼠标移入颜色
$blue-logo-light-title-color: #2f54eb; //顶部logo背景颜色
//新增导出
menuBlueBackground:$base-menu-blue-background;
menuBackgroundColor:$blue-logo-light-title-color; //头部logo背景颜色
这里的变量名可以自定义，但还是要注意和后面的一一对应
2.4.2 修改文件路径：src\assets\styles\sidebar.scss
//新增样式
& .theme-blue .nest-menu .el-submenu>.el-submenu__title,
& .theme-blue .el-submenu .el-menu-item {
background-color: $blue-sub-menu-background !important;
&:hover {
background-color: $blue-sub-menu-hover !important;
}
}
2.5 修改Logo.vue
文件路径：src\layout\components\Sidebar\Logo.vue
<template>
<!--顶部logo的背景颜色-->
<div class="sidebar-logo-container" :class="{'collapse':collapse}"
:style="{ backgroundColor: variables.menuBackgroundColor}">
<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 : variables.logoTitleColor}">
{{ 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 : variables.logoTitleColor}">
{{ title }} </h1>
</router-link>
</transition>
</div>
</template>
这里主要是修改顶部logo的背景颜色
2.6 修改Sidebar.vue
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
: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"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
以下代码是去除顶部logo的阴影效果，个人感觉好看一些，把sidebar-container属性下的
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
移入到 el-scrollbar 属性中
//修改左侧菜单栏右侧去除顶部的阴影效果
.el-scrollbar {
height: 100%;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
