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

前景提要:要求不同权限账号登录侧边栏颜色不一样。分为 theme:1代表默认样式,theme:2代表深色主题样式。
1.首先定义一个主题文件 theme.js,定义两个主题样式

// 主要是切换菜单栏和菜单头部主题的设计,整体主题样式切换是否能匹配
export const _Theme = {'lightTheme': {// 默认主题样式,要和varibles.scss的变量参数属性一样,theme为1menuBg: '#ffffff',menuText: '#464646',subMenuActiveText: '#464646',menu: '#F7FCFF'},'darkTheme': {// 深色主题,theme为2menuBg: '#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>
侧边栏文件: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-itemv-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:

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

展示结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/592493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【7z压缩包】7z压缩包没密码怎么办

7z压缩包设置了密码&#xff0c;解压的时候就需要输入正确对密码才能顺利解压出文件&#xff0c;正常当我们解压文件或者删除密码的时候&#xff0c;虽然方法多&#xff0c;但是都需要输入正确的密码才能完成。忘记密码就无法进行操作。 那么&#xff0c;忘记了7z压缩包的密码…

牙科废水处理设备详细介绍

诸城市鑫淼环保小编带大家了解一下牙科废水处理设备详细介绍 原理&#xff1a; 牙科废水处理设备通常采用物理、化学和生物处理技术&#xff0c;结合多个步骤进行处理&#xff0c;以将废水中的污染物去除或转化为较为安全的形式。 1.物理处理&#xff1a;包括初级过滤&#xff…

rime中州韵 输入字符透传 lua Translator

在 rime中州韵 help lua Translator 中我们分享了如何使用 lua 脚本定义一个 translator&#xff0c;并以 五笔・拼音 为例引用了该 translator&#xff0c;并且达到了预期的效果。 今天&#xff0c;我们继续通过 lua 脚本为 rime中州韵/小狼毫 输入法打造一个 translator&…

使用Spring Retry优雅的实现业务异常重试

在系统中经常遇到业务重试的逻辑&#xff0c;比如三方接口调用&#xff0c;timeout重试三遍&#xff0c;异常处理重试的兜底逻辑等。那你是不是还在用下面这种方式呢&#xff1a; 我想大家可能很多时候也会这么写&#xff0c;这是能想到的第一个方法&#xff0c;但是我们这段代…

Ant Design Vue 编译后的网页特点是什么,怎么确认他是用的前端 Ant Design Vue 技术栈的呢?

Ant Design Vue 是一个前端 UI 框架&#xff0c;使用 Vue.js 构建。它包含了大量的预设样式和组件&#xff0c;如按钮、表单、表格等&#xff0c;可以帮助开发者快速构建出优雅且功能丰富的网页。但是&#xff0c;要确定一个编译后的网页是否使用了 Ant Design Vue&#xff0c;…

【算法】利用分治思想解算法题:快排、归并、快速选择实战(C++)

1. 分治思想 介绍 分治法将问题划分成多个相互独立且相同或类似的子问题&#xff0c;然后递归地解决每个子问题&#xff0c;并将结果合并以得到原始问题的解。 分治思想通常包含以下三个步骤&#xff1a; 分解&#xff1a;将原始问题划分成多个规模较小、相互独立且类似的子…

单片机大小端模式

单片机大小端模式 参考链接 单片机干货-什么是大小端_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Ju4y1M7Tx/?spm_id_from333.337.search-card.all.click&vd_sourcee821a225c7ba4a7b85e5aa6d013ac92e 特此记录 anlog 2024年1月2日

在C++程序中调用被C编译器编译后的函数(使用extern “C“),举例详细说明

在C编程中&#xff0c;有时候我们需要调用由C编译器编译后生成的函数。然而&#xff0c;由于C和C在函数命名规则和调用约定上存在差异&#xff0c;直接在C代码中调用这些C函数会导致编译错误或运行时错误。为了解决这个问题&#xff0c;我们需要使用extern "C"来告诉…

response.setheader用法详解

response.setheader用法详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们深入探讨一项在Web开发中常用的技术——response.setheader的用…

文本到3D肖像最强生成方案!DiffusionGAN3D: 3D GANs和Diffusion先验强强联合!

本文介绍了一个新型框架DiffusionGAN3D&#xff0c;旨在改善文本引导的3D域适应和生成&#xff0c;以及解决现有方法在这些任务中存在的问题&#xff0c;如 inflexibility&#xff08;缺乏灵活性&#xff09;、instability&#xff08;不稳定性&#xff09;和low fidelity&…

Linux驱动学习—设备树及设备树下的platform总线

1、什么是设备树&#xff1f; 设备树是一种描述硬件资源的数据结构。他通过bootloader将硬件资源传给内核&#xff0c;使得内核和硬件资源 描述相对独立。 2、设备树的由来 2.1 平台总线的由来 要想了解为什么会有设备树&#xff0c;设备树是怎么来的&#xff0c;我们就要先…

计算机毕业论文内容参考|基于Apriori算法的门诊药物推荐系统的设计与实现

文章目录 摘要:前言相关技术与方法介绍系统分析系统设计系统实现系统测试与优化总结与展望摘要: 本文详细介绍了一种基于Apriori算法的门诊药物推荐系统的设计与实现。该系统利用Apriori算法挖掘患者就诊记录中的药物关联规则,为医生提供药物推荐,从而优化治疗方案。文章首…

2023春季李宏毅机器学习笔记 01 :正确认识 ChatGPT

资料 课程主页&#xff1a;https://speech.ee.ntu.edu.tw/~hylee/ml/2023-spring.phpGithub&#xff1a;https://github.com/Fafa-DL/Lhy_Machine_LearningB站课程&#xff1a;https://space.bilibili.com/253734135/channel/collectiondetail?sid2014800 一、对Chatgpt的误解…

CISSP 第5章 保护资产的安全

1、资产识别和分类 1.1 敏感数据 1.1.1 定义 敏感数据是任何非公开或非机密的信息&#xff0c;包括机密的、专有的、受保护的或因其对组织的价值或按照现有的法律和法规而需要组织保护的任何其他类型的数据。 1.1.2 个人身份信息PII 个人身份信息&#xff08;PII&#xff09…

python旅游大数据分析可视化大屏 游客分析+商家分析+舆情分析 计算机毕业设计(附源码)Flask框架✅

毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路&#xff0c;大家在毕设选题&#xff…

[GKCTF 2020]ez三剑客-eztypecho

[GKCTF 2020]ez三剑客-eztypecho 考点&#xff1a;Typecho反序列化漏洞 打开题目&#xff0c;发现是typecho的CMS 尝试跟着创建数据库发现不行&#xff0c;那么就搜搜此版本的相关信息发现存在反序列化漏洞 参考文章 跟着该文章分析来&#xff0c;首先找到install.php&#xf…

Ubuntu20.04安装suiteCRM

两篇有用的文章 在ubuntu16.04上安装suitecrm_suitecrm ubuntu-CSDN博客 SuiteCRM搭建安装&#xff08;apachemsyqlphp&#xff09;_suitecrm 宝塔安装-CSDN博客 对照着一步步操作就可以了

基于多反应堆的高并发服务器【C/C++/Reactor】(中)处理任务队列中的任务 添加 删除 修改

&#xff08;1&#xff09;EventLoop启动 EventLoop初始化和启动 // 启动反应堆模型 int eventLoopRun(struct EventLoop* evLoop) {assert(evLoop ! NULL);// 取出事件分发和检测模型struct Dispatcher* dispatcher evLoop->dispatcher;// 比较线程ID是否正常if(evLoop-&…

grep -A -B -C 输出匹配行及相邻行

grep -A -B -C 输出匹配行及相邻行 grep --help 摘抄&#x1f447; 文件控制&#xff1a; -B, --before-context数值 打印前面 <数值> 行上下文-A, --after-context数值 打印后面 <数值> 行上下文-C, --context数值 打印前后 <数值> 行上下文 文件控制&#…

python小工具之弱密码检测工具

一、引用的python模块 Crypto&#xff1a; Python中一个强大的加密模块&#xff0c;提供了许多常见的加密算法和工具。它建立在pyc.ypodome或pyc.ypto等底层加密库之上&#xff0c;为Python程序员提供了简单易用的API&#xff0c;使其可以轻松地实现各种加密功能。 commands…