1.左菜单背景颜色实现深色与浅色切换

loulijun2021

2022-12-31 21232ab15a4b7d17d535434adeb6246269137859

1.左菜单背景颜色实现深色与浅色切换

 src/layout/components/Settings/index.vue

@@ -26,8 +26,20 @@
          style="display: block"
          :active-color="$store.state.settings.theme"
          inactive-color="#ccc"
          active-text="横屏"
          inactive-text="竖屏"
          active-text="横向"
          inactive-text="竖向"
        />
      </div>
      <div class="drawer-item" style="display: flex;justify-content: space-between">
        <span>左侧颜色</span>
        <el-switch
          v-model="$store.state.settings.leftBackgroundColorValue"
          style="display: block"
          active-color="#304156"
          :disabled="$store.state.settings.menuIsHorizontal"
          inactive-color="#ccc"
          active-text="深色"
          inactive-text="浅色"
        />
      </div>


 src/layout/components/Sidebar/index.vue

@@ -3,14 +3,15 @@

    <logo v-if="showLogo" :collapse="isCollapse" />

    <div v-if="$store.state.app.sidebar.opened&&!$store.state.settings.menuIsHorizontal" class="layoutLogo" />
    <div v-if="$store.state.app.sidebar.opened&&!$store.state.settings.menuIsHorizontal" :class="{'leftBackgroundColorValue':$store.state.settings.leftBackgroundColorValue}" class="layoutLogo" />

    <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbarWrapperClass">
      <el-menu
        v-if="!$store.state.settings.menuIsHorizontal"
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :background-color="$store.state.settings.leftBackgroundColorValue?'#f8f8fa':variables.menuBg"
        :text-color="$store.state.settings.leftBackgroundColorValue?`rgb(48, 65, 86,0.8)`:variables.menuText"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        :unique-opened="false"
@@ -107,6 +108,9 @@
  height: 90px;
  background: url("../../../assets/images/layout_logo.png") no-repeat;
}
.leftBackgroundColorValue{
  background-color: #e0e0e0;
}

.scrollbarWrapperClass {
  margin-top: 90px;
@@ -120,7 +124,6 @@

.el-button--text:focus {
  color: white;

}

//#app .sidebar-container .el-submenu .el-menu-item {
@@ -167,7 +170,7 @@
  cursor: default;
}

.el-menu {
  background-color: #213145 !important;
}
//.el-menu {
//  background-color: #213145 !important;
//}
</style>

 src/layout/index.vue

@@ -2,7 +2,11 @@
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar
      :class="$store.state.settings.menuIsHorizontal?'sidebar-container-sideBarWidthIsMenuHorizontal':'sidebar-container'"
      :class="$store.state.settings.menuIsHorizontal?
      'sidebar-container-sideBarWidthIsMenuHorizontal':
      $store.state.settings.leftBackgroundColorValue?
      'sidebar-container-leftBackgroundColorValue':
      'sidebar-container'"
    />
    <div
      :class="$store.state.settings.menuIsHorizontal?'main-container-sideBarWidthIsMenuHorizontal': 'main-container'"

 src/settings.js

@@ -28,6 +28,8 @@

  headBackgroundColorValue: false, // 头部背景颜色

  menuIsHorizontal: true// 菜单是否是横屏
  menuIsHorizontal: false, // 菜单是否是横屏

  leftBackgroundColorValue: false// 左侧栏背景颜色

}

 src/store/modules/settings.js

@@ -1,9 +1,18 @@
import defaultSettings from '@/settings'
import variables from '@/styles/element-variables.scss'

const { showSettings, tagsView, fixedHeader, sidebarLogo, headBackgroundColorValue, menuIsHorizontal } = defaultSettings
const {
  showSettings,
  tagsView,
  fixedHeader,
  sidebarLogo,
  headBackgroundColorValue,
  menuIsHorizontal,
  leftBackgroundColorValue
} = defaultSettings

const state = {
  leftBackgroundColorValue: leftBackgroundColorValue,//左边背景颜色
  headBackgroundColorValue: headBackgroundColorValue, // 头部背景颜色
  menuIsHorizontal: menuIsHorizontal, // 菜单是否是横屏
  theme: variables.theme,

 src/styles/sidebar.scss

@@ -98,6 +98,95 @@
    }
  }


  .sidebar-container-leftBackgroundColorValue {
    transition: width 0.28s;
    width: $sideBarWidth !important;
    background-color: $menuBgLeftBackgroundColorValue;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 50px);
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        //background-color: $menuHover !important;
        background-color: #eee !important;
      }
    }

    .is-active > .el-submenu__title {
      //color: $subMenuActiveText !important;
      color: #000 !important;
    }

    & .nest-menu .el-submenu > .el-submenu__title,
    & .el-submenu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: #f8f8fa !important;

      &:hover {
        //background-color: $subMenuHover !important;
        background-color: #eee  !important;
      }
    }
  }


  .sidebar-container-sideBarWidthIsMenuHorizontal {
    transition: width 0.28s;
    width: $sideBarWidthIsMenuHorizontal !important;
@@ -282,6 +371,7 @@
    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;

 src/styles/variables.scss

@@ -13,6 +13,9 @@

$sideBarWidthIsMenuHorizontal: 0; //当菜单横屏时的侧边栏高度


$menuBgLeftBackgroundColorValue: #f8f8fa; //当菜单横屏时的侧边栏高度

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
@@ -25,4 +28,5 @@
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  sideBarWidthIsMenuHorizontal:$sideBarWidthIsMenuHorizontal;
  menuBgLeftBackgroundColorValue:$menuBgLeftBackgroundColorValue;
}