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; 利用小车写蜂鸣器

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

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

某赛通电子文档安全管理系统 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;这个地图可以保存下来&…

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

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

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

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

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

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

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

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

(java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~

目录 冒泡排序(BubbleSort)&#xff1a; 代码详解&#xff1a; 冒泡排序的优化&#xff1a; 选择排序(SelectSort)&#xff1a; 代码详解&#xff1a; 插入排序&#xff08;InsertSort&#xff09;&#xff1a; 代码详解&#xff1a; 希尔排序(ShellSort)&#xff1a; 法一…

Java中的常用API

常用API Object类浅克隆与深克隆 ObjectsObjects中的equals 包装类StringBuilder和StringBufferStringBuilder是可变字符串对象StringBuffer线程安全案例![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/87649c20e6464113a42aee5f16f1ee22.png) StringJoiner Object…

关于ZYZ旋转和XYZ旋转

ZYZ旋转和XYZ旋转 概述1、XYZ旋转2、ZYZ旋转 概述 以下公式默认为右手坐标系&#xff1b;ZYZ通常可以避免死解情况&#xff0c;因此在六轴末端解算时常被用到&#xff1b;参考文章 1、XYZ旋转 XYZ旋转一般是绕固定轴旋转(外旋)&#xff0c;旋转矩阵的构成为&#xff1a;RzRy…

软考 系统分析师系列知识点之需求管理(3)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之需求管理&#xff08;2&#xff09; 所属章节&#xff1a; 第11章. 软件需求工程 第8节. 需求管理 11.8.4 需求跟踪 根据IEEE的定义&#xff0c;可跟踪性包含两个层面的含义&#xff1a;一个是开发过程的两个或多个产品之…

无广告iOS获取设备UDID 简单方便快捷

ps&#xff1a; 为啥不用蒲公英了&#xff0c;就是因为有广告了&#xff0c;获取个UDID还安装游戏&#xff0c;真恶心?&#xff0c;所以找了新的获取UDID都方法&#xff0c;网页直接获取就可以&#xff0c;不会安装软件。 UDID 是一种 iOS 设备的特殊识别码。除序号之外&…

(1)cpu0简介

一、cpu0介绍 cpu032位架构16位通用寄存器&#xff0c;协处理器和其他特殊寄存器 &#xff08;1&#xff09;通用寄存器 全局指针寄存器&#xff1a;"Global Pointer register"&#xff08;全局指针寄存器&#xff09;是一个在某些处理器架构中存在的专用寄存器&…

单臂路由实验(思科)

一&#xff0c;实验目的 在路由器的一个接口上通过配置子接口的方式&#xff0c;实现相互隔离的不同vlan之间互通。 二&#xff0c;设备配置 Switch1 Switch>enable 全局模式 Switch#configure terminal 配置模式 Switch(config)#vlan 10 …