vue-element-admin 换肤功能,登录后不同权限不同皮肤,刷新不会失效

news2024/12/23 12:37:00

一、拉vue-element-admin的代码跑起来

安装依赖时会遇到一些问题,tui-editor装不上,需要按照以下步骤删除它

1、vue-element-admin\package.json 删除‘tui-editor’:‘1.3.3’依赖项。
2、vue-element-admin\src\components 删除MarkdownEditor文件夹。
3、vue-element-admin\src\view\components-demo 删除markdown.vue文件。
4、vue-element-admin\src\router\modules components.js 删除{path:‘markdown,’}这一列。
5、npm install
6、npm run dev

二、修改主题色和自定义颜色

参照ThemePicker组件里的方法,简单修改后编写了一个混入文件 themeMixin.js ,在登录页以及layout/AppMain.vue 引入, 并在created生命周期调用方法 this.handleUserTheme()

themeMixin.js下载地址↓

链接:https://pan.baidu.com/s/104HYcJeqnni6sTb7U1afKA?pwd=28rf 
提取码:28rf 

登录页面的使用方式↓ 

import { themeMixin } from '@/mixins/themeMixin'

mixins: [themeMixin],  // 和created同级

将从接口获取到该用户的主题色本地缓存下, 然后调用混入里的方法执行换肤

          // 主题色缓存
          this.$ls.set('theme-color', res.data.interfaceTheme)
          // 切换主题色和其他自定义颜色
          this.handleUserTheme()
          document.getElementsByTagName('body')[0].style.setProperty('--subjectColor', res.data.interfaceTheme)

后面的

document.getElementsByTagName('body')[0].style.setProperty('--subjectColor', res.data.interfaceTheme)

是为了修改scss文件里的自定义颜色变量,因为项目除了eleme的组件还会有很多自定义组件,会了保持样式颜色的统一,很多自定义组件都会用自定义scss变量和主题色保持一致

variables.scss定义的scss变量, 可通过js修改

自定义scss变量使用示例:

每次主题色变的时候,自定义颜色也跟着变, 这样就保证了 主题色和自定义组件的风格统一了!

@import "~@/styles/variables.scss";

background-color: var(--subjectColor);

 -----------------------------------------------------------------------------------------------------------

AppMain.vue的使用方式↓ 

引入方式同上

  因为登录进去后 每次F5刷新会先进AppMain.vue的created , 所以在这里执行一次换肤很适合

主题色换肤的原理就是:从线上拿到当前版本的elemeUi组件的css文件,替换其中涉及到主题色的style,该方式刷新会失效, 所以需要每次刷新修改一次

不足:

1. 登录页每次刷新从接口取颜色的时候会短暂闪过初始主题色,接口取值需要时间

2. 每次换肤都要调用eleme官方CDN ,哪天崩了我也要崩了

3. 应该有更完善的本地换肤方式

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

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

相关文章

C++ 三种智能指针及其设计实现unique_ptr、 share_ptr 指针

0、差不多春节啦。。。。。 好久没有写博客,写一写吧。。。。。。 祝大家嗨皮,提前恭喜发财 1、三种智能指针的使用方法 C 有3种指针:share_ptr, unique_ptr, weak_ptr 1.1)unique_ptr 指针 std::unique_ptr 是一种独占的智能指…

Sklearn标准化和归一化方法汇总(1):标准化 / 标准差归一化 / Z-Score归一化

Sklearn中与特征缩放有关的五个函数和类,全部位于sklearn.preprocessing包内。作为一个系列文章,我们将逐一讲解Sklearn中提供的标准化和归一化方法,以下是本系列已发布的文章列表: Sklearn标准化和归一化方法汇总(1)&#xff1a…

ESP32 (WIFI)-AP、STA模式(13)

提示:本博客作为学习笔记,有错误的地方希望指正 文章目录一、ESP32 WIFI模式概述二、ESP32 WIFI-AP初始化流程三、WIFI-AP示例四、ESP32 WIFI-STA初始化流程五、WIFI-STA示例一、ESP32 WIFI模式概述 参考资料:ESP IDF编程手册V4.4   WIFI主…

【GD32F427开发板试用】Systick系统定时器的使用

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动,更多开发板试用活动请关注极术社区网站。作者:HonestQiao 基于Arm Cortex-M系列内核的MCU,都包含了SysTick定时器。 所谓SysTick即为系统定时器,又称嘀嗒定时器&am…

Docker Swarm

Swarm 是什么? Docker Swarm 是Docker官方的跨节点的容器编排工具。用户只需要在单一的管理节点上操作,即可管理集群下的所有节点和容器。 主要解决什么问题 1. 解决docker server的集群化管理和部署。 2. Swarm通过对Docker宿主机上添加的标签信息来…

分享60个PHP源码,总有一款适合您

PHP源码 分享60个PHP源码,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 60个PHP源码下载链接:https://pan.baidu.com/s/1SvjbzolwuMrQyhVb_byG5Q?pwdx831 提取码&#xff…

生物素点击标记试剂:DBCO-SS-PEG3-biotin,1430408-09-5,生物素PEG3二硫键DBCO

1、理论分析:中文名:生物素-三聚乙二醇-二硫-二苯并环辛炔,生物素-PEG3-二硫-DBCO ,生物素PEG3-二硫二苯并环辛炔英文名:DBCO-S-S-PEG3-biotin,Biotin-PEG3-SS-DBCOCAS号:1430408-09-5化学式&am…

如何使用ArcGIS进行点抽稀

01 概述对于制图工作者而言,遇到大量的点要素(POI、村名等)标注的时候往往非常的麻烦,因为这些点往往都是十分的密集,直接标注很影响制图的美观。如果直接去处理原始的数据,会导致后续的数据更新维护麻烦&a…

pdf合并在线,大家都在用的工具

工作和生活当中都有很多场景需要我们提交PDF文档,而且有时候要求仅能提交一份,如果这时候刚好你的文档分成了几份,就得先合并之后才能提交。要在线合并PDF并不麻烦,关键是用对工具。下面就来给大家介绍几款热门的软件,…

Spring Boot(五十五):基于redis防止接口恶意刷新和暴力请求

下面的教程,通过intercept和redis针对urlip在一定时间内访问的次数来将ip禁用,可以根据自己的需求进行相应的修改,来达到自己的目的 下面只讲解大致步骤,不详细讲解,需要完整代码的可以自行下载。 https://download.c…

数据结构之查找详解

一、什么是查找表? 1.1 定义 查找表是由同一类型的数据元素构成的集合。例如电话号码簿和字典都可以看作是一张查找表。 1.2 查找表的几种操作: 1)在查找表中查找某个具体的数据元素; 2)在查找表中插入数据元素&am…

win10环境使用nvm安装多版本nodejs并配置环境变量

win10环境使用nvm安装多版本nodejs并配置环境变量nvm安装环境变量配置测试安装全局模块对于旧版本的node,手动安装npm最近使用node工程,需要多版本,并且进行切换,来回安装卸载不同版本的node比较麻烦,后面自己就简单捯…

MySQL 5.5版本的两个执行引擎

目录执行引擎引入MySQL执行引擎生成的文件MyIsamInnoDB聚簇索引与非聚簇索引稀疏索引回表覆盖索引执行引擎引入 我们真正的索引结构要去落地的时候呢,也就是MySQL底层BTree数据结构要去落地的话,那么一定要和我们的存储引擎相结合。接下来我们会说MySQL…

【游戏逆向】老飞飞怀恋魅力爱玩等老飞飞瞬移分析代码

【游戏逆向】老飞飞怀恋魅力爱玩等老飞飞瞬移分析代码 在游戏中,每个人物都有一个坐标。x坐标和y坐标。老飞飞也一样,可能有些朋友用ce找到当前的人物坐标。然后修改坐标就能达到瞬移到效果。不过有些老飞飞是无法实现的。只要瞬移就会掉客户端。今天就…

3>2,看看U.3升级了啥

关注企业级NVMe SSD的小伙伴对U.2接口一定不会感到陌生。然而,在U.2之外,还存在一种名为“U.3”的硬盘接口,二者外观完全相同,接口性能也都一样,甚至不少客户直接将U.3的NVMe SSD部署在U.2服务器上使用。但既然3&#…

分布式应用解决方案之一致性Hash

什么是一致性Hash 一致性Hash就是将整个hash值空间按照顺时针方向形成一个虚拟的环,整个环状结构就称之为Hash环。那为什么叫做一致性Hash环?一致性是由于Hash环应用场景一般在分布式应用服务中,各个服务提供者分布在hash环中,当某…

【Qt】一文总结新工程的创建

文章目录一、导读二、浅谈开发方式(2-1)C开发方式(2-2)QtQuick qml开发方式(2-3)python开发方式三、新工程创建向导下的Library四、其他项目五、其他工程项目六、Import Project选项七、总结一、导读 在使…

Linux-Find命令

目录 Find 命令格式: 常用查找条件 案例展示: Find find 命令根据预设的条件递归查找文件或目录所在位置 命令格式: 命令格式:find 查找路径 查找条件1 查找条件2 .. [-exec 处理命令 {} \; ] –exec 可接额外的命令来处理查…

【Kubernetes 企业项目实战】03、基于 Alertmanager 发送报警到多个接收方(下)

目录 一、promethues 采集 tomcat 监控数据 1.1 制作 tomcat 镜像 1.2 基于上面的镜像创建一个 tomcat 实例 1.3 采集数据 二、promethues 采集 redis 监控数据 2.1 配置一个 Redis 的 exporter 2.2 查看 Prometheus 2.3 grafana 导入模板 三、Prometheus 监控 mysql …

【微服务】Nacos 前端设计

目录 一、背景 二、选型 React 1、Vue vs React vs Angular 1.1、npm trends 2、GitHub Stats 3、根据自身情况选型 4、现状 5、小结 6、React/Vue ⽣态 三、方案 💖微服务实战 💖 Spring家族及微服务系列文章 一、背景 我们需要提供⼀个简单…