vue+element 换肤功能

1.首先建深色和浅色两个主题样式变量样式表,样式表名和按钮中传入的值一样,本例中起名为default.scss和dark.scss
2.在data中定义主题变量名 zTheme:‘defalut’,默认引用defalut.scss,
在点击按钮时切换引用的样式表,达到换肤效果
3.dom中写入主题切换按钮

 /****更换主题按钮*****/
<div class="set-theme"><el-button type="text" @click="setTheme('dark')">深色主题</el-button>  &emsp; &emsp;||<el-button  type="text" @click="setTheme('default')">浅色主题</el-button>
</div>

2.setTheme 方法逻辑处理

 /****更换主题方法*****/setTheme(themeName){this.zTheme = themeNamelocalStorage.setItem('zTheme',themeName)require(`@/assets/styles/theme/${this.zTheme}.scss`)location.reload();/*this.$parent.$forceUpdate()this.$router.go(0);*/},

3.页面加载时调用存储的theme主题

 created() {const route = this.$route; // 获取当前路由信息if (route.path != '/indexs') {  //此路由为三维系统require(`@/assets/styles/index.scss`)}else {return '';}  //因本项目是二维三维系统在一个项目中,为了不影响三维样式,加此代码,通过判断,只有二维时才加载index.scss/***皮肤***/let theme=localStorage.getItem('zTheme')if(theme){this.zTheme = themerequire(`@/assets/styles/theme/${this.zTheme}.scss`)}   

在这里插入图片描述

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

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

相关文章

结合实例谈谈SPSS多元线性回归分析结果解读与报告撰写

为研究某地区房地产市场的价格与相关影响因素之间的关系&#xff0c;现从该地区采集了 20 份样本&#xff0c;数据如下表&#xff0c;请给出销售价格与相关影响因素之间的函数表达式&#xff0c;并从统计学角度分析这些因素之间的关系&#xff0c;最后预测 X 小区的平均销售价格…

【洛谷学习自留】p1055 ISBN 号码

解题思路&#xff1a; 1.首先考虑怎么分解字符串的问题&#xff0c;把字符串内的数字拿出来&#xff0c;这里我使用了String的toCharArray方法&#xff0c;将字符串内的所有字符拿出来&#xff0c;然后针对性的把所有数字轮流用于计算&#xff0c;因为数组内的数字是以字符的形…

中小学电子编程内部集中培训第三课

蜂鸣器学习 可视化代码 见链接&#xff1a; 利用小车写蜂鸣器

VMware:在部分链上无法执行所调用的函数,请打开父虚拟磁

VMware:在部分链上无法执行所调用的函数&#xff0c;请打开父虚拟磁 问题&#xff1a;VMware给虚拟机扩展硬盘容量&#xff0c;提示&#xff1a;在部分链上无法执行所调用的函数&#xff0c;请打开父虚拟磁。原因&#xff1a;是因为你的虚拟磁盘文件是分多个文件存储的&#xf…

北朝隋唐文物展亮相广西,文物预防性保护网关保驾护航

一、霸府名都——太原博物馆收藏北朝隋朝文物展 2月1日&#xff0c;广西民族博物馆与太原博物馆携手&#xff0c;盛大开启“霸府名都——太原博物馆北朝隋文物展”。此次新春展览精选了北朝隋唐时期150多件晋阳文物珍品。依据“巍巍雄镇”“惊世古冢”“锦绣名都”三个单元&am…

【程序员的自我修养】7. 动态链接

为什么要动态链接 浪费内存和和磁盘空间 每个程序都得拥有相同的拷贝程序的发布、更新和部署困难 更新任何一个小的模块&#xff0c;整个程序都需要重新链接 动态链接&#xff1a;将链接的过程推迟到运行时 节省内存减少物理页面的换入换出、增加CPU的缓存命中率更新升级方便…

LeetCode--88

给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并后数组…

ChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI

文章目录 ChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI一、ChatGPT(OpenAI)的新版API调用1.1 环境变量配置与调用1.2 新版api调用1.3 命令行流式输出二、Gradio制作自己的聊天WebUIChatGPT实战100例 - (13) 写一个属于自己的 ChatGPT 新版 WebUI 今时不同往日…

某赛通电子文档安全管理系统 UploadFileList 任意文件读取漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…

用VsCode写python

1.创建一个文件夹 2.创建.py文件 print("Hello World") print("*"*10) 4.运行 在终端版本fileName python3 app.py

线性代数:线性方程组

目录 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理 一、线性方程组概念 二、消元法求线性方程组 三、系数阵的秩与线性方程组的解 无解 唯一解 无数解 相关定理

Redis -- hash哈希

马行软地易失蹄&#xff0c;人贪安逸易失志。 目录 关于Redis的hash hash命令 hset hget hexists hdel hkeys hvals hgetall hmget hlen hsetnx hash计数 hincrby hincrbyfloat 小结 关于Redis的hash 几乎所有的主流编程语言都提供了哈希&#xff08;hash&a…

移动机器人激光SLAM导航(三):Hector SLAM 篇

参考引用 Hector_Mapping ROS-Wiki从零开始搭二维激光SLAM机器人工匠阿杰wpr_simulation 移动机器人激光SLAM导航&#xff08;文章链接汇总&#xff09; 1. 基于滤波器的 SLAM 问题 1.1 什么是 SLAM 什么是SLAM SLAM 就是为了构建地图用的&#xff0c;这个地图可以保存下来&…

SpringBoot集成Redisson实现限流(二)

1. 简介 Springboot集成Redisson默认的限流器为令牌桶型限流器&#xff0c;底层是通过lua脚本去实现的。 通过lua脚本我们可以去实现一个滑动窗口限流器&#xff0c;利用ZSET格式数据就可以轻松实现。 springboot集成Redisson就不做讲解&#xff0c;可以参考&#xff1a;sprin…

将word中插入的zotero文献转为latex引用样式

在word中&#xff0c;可以使用zotero插件插入和管理参考文献。 例如&#xff1a; 若需要将这段内容移植到latex&#xff0c;就需要将对应的引用编号用\cite{}替换。手动替换非常麻烦且容易出错。要实现自动转换&#xff0c;可在zotero中定制一种新的引文格式&#xff0c;自动将…

第二十三天| 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

Leetcode 669. 修剪二叉搜索树 题目链接&#xff1a;669 修剪二叉搜索树 题干&#xff1a;给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变保留在树中的元…

常见的6种软件测试用例设计方法

常见的软件测试用例设计方法&#xff0c;个人认为主要是下面这6种&#xff1a; 流程图法&#xff08;也叫场景法&#xff09;等价类划分法边界值分析判定表正交法错误推测法 这6种常见方法中&#xff0c;我分别按照定义、应用场景、使用步骤、案例讲解这4个部分进行讲解。 所…

实习|基于SSM的实习管理系统设计与实现(源码+数据库+文档)

实习管理系统目录 目录 基于SSM的实习管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能介绍 &#xff08;1&#xff09;管理员登录 &#xff08;2&#xff09;实训方向管理 &#xff08;3&#xff09;公告信息管理 &#xff08;4&#xff0…

C++——STL标准模板库——常用算法归纳

使用标准模板库提供的算法需要包含头文件&#xff1a;algorithm&#xff0c;其中包含了遍历、查找、排序、拷贝和替换等算法。当容器储存内置数据类型可使用STL提供函数对象&#xff0c;当容器储存自定义数据类型时需要自定义数据对象或者函数用于提供自定义数据类型的比较、计…

STM32MP135开发板助力电力行业,IEC61850协议移植笔记

1.概述 IEC61850是变电站自动化系统&#xff08;SAS&#xff09;中通信系统和分散能源&#xff08;DER&#xff09;管理的国际标准。它通过标准的实现&#xff0c;实现了智能变电站的工程运作标准化。使得智能变电站的工程实施变得规范、统一和透明&#xff0c;在电力和储能系…