快捷導(dǎo)航

vue?+elementui?項目登錄通過不同賬號切換側(cè)邊欄菜單的顏色

更新時間：2024年01月03日 11:06:06 作者：zc自由飛~

這篇文章主要介紹了vue?+elementui?項目登錄通過不同賬號切換側(cè)邊欄菜單的顏色,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

前景提要：要求不同權(quán)限賬號登錄側(cè)邊欄顏色不一樣。分為 theme：1代表默認(rèn)樣式，theme:2代表深色主題樣式。
1.首先定義一個主題文件 theme.js，定義兩個主題樣式

// 主要是切換菜單欄和菜單頭部主題的設(shè)計，整體主題樣式切換是否能匹配
export const _Theme = {
  'lightTheme': {
    // 默認(rèn)主題樣式，要和varibles.scss的變量參數(shù)屬性一樣，theme為1
    menuBg: '#ffffff',
    menuText: '#464646',
    subMenuActiveText: '#464646',
    menu: '#F7FCFF'
  },
  'darkTheme': {
    // 深色主題，theme為2
    menuBg: '#2781AB',
    menuText: '#BDCBD9',
    subMenuActiveText: '#ffffff',
    menu: '#106E9A'
  }
}

2.在 App.vue 里獲取上邊的 js 文件的主題
App.vue ：

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { _Theme } from './theme.js'
export default {
  name: 'App',
  computed: {
    nowTheme: {
      get() {
        return this.$store.state.user.user.theme
      }
    }
  },
  watch: {
    // 主題切換
    nowTheme() {
      if (this.nowTheme === 2) {
        this.changeStyle(_Theme.darkTheme)
      } else {
        this.changeStyle(_Theme.lightTheme)
      }
    }
  },
  methods: {
  //主要代碼
    changeStyle(obj) {
      for (const key in obj) {
        document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
      }
    }
  }
}
</script>
側(cè)邊欄文件：index.vue:
```javascript
<template>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variablesa.menuBg"
        :text-color="variablesa.menuText"
        :unique-opened="$store.state.settings.uniqueOpened"
        :active-text-color="variablesa.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in sidebarRouters"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
</template>
<script>
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.scss' //主要代碼
export default {
  computed: {
    variablesa() {
      return variables
    }
  }
}
</script>

側(cè)邊欄樣式表：variables.scss:

// sidebar
$menuText:var(--menuText,#464646);
$menuActiveText:var(--menuActiveText,$--color-theme);
$subMenuActiveText:var(--subMenuActiveText,#464646);
$menuBg:var(--menuBg,#ffffff);//側(cè)邊欄菜單主題色
$menuTopBg:transparent;//頂欄菜單主題色
$menuHover:var(--menu,#F7FCFF);
$subMenuBg:var(--menu,#F7FCFF);
$subMenuHover:var(--menu,#F7FCFF);
$sideBarWidth: 260px;
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuTopBg: $menuTopBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

展示結(jié)果：

到此這篇關(guān)于vue +elementui 項目登錄通過不同賬號切換側(cè)邊欄菜單的顏色的文章就介紹到這了,更多相關(guān)vue elementui切換側(cè)邊欄菜單顏色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: