vue +elementui 项目登录通过不同账号切换侧边栏菜单的颜色

前景提要:要求不同权限账号登录侧边栏颜色不一样。分为 theme:1代表默认样式,theme:2代表深色主题样式。

1.首先定义一个主题文件 theme.js,定义两个主题样式

javascript 复制代码
// 主要是切换菜单栏和菜单头部主题的设计,整体主题样式切换是否能匹配
export const _Theme = {
  'lightTheme': {
    // 默认主题样式,要和varibles.scss的变量参数属性一样,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 :

javascript 复制代码
<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>
侧边栏文件: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>

侧边栏样式表:variables.scss:

css 复制代码
// sidebar
$menuText:var(--menuText,#464646);

$menuActiveText:var(--menuActiveText,$--color-theme);
$subMenuActiveText:var(--subMenuActiveText,#464646);

$menuBg:var(--menuBg,#ffffff);//侧边栏菜单主题色

$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;
}

展示结果:

相关推荐
花海如潮淹几秒前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互