vue自定义主题皮肤方案

方案一:CSS变量换肤(推荐)

  • 利用css定义变量的方法,用var在全局定义颜色变量(需将变量提升到全局即伪类选择器 :root)
  • 然后利用js操作css变量,document.getElementsByTagName(‘body’)[0].style.setProperty(key, value)的方式直接修改变量值

1、assets内css文件,定义全局css变量,使用:root变量提升,需要用到的地方使用var包裹使用,main.jsb内将该css文件引入,如图

在这里插入图片描述

2、使用setProperty(key, value)方法,key即我们上方定义的,value为要更改的值

document.getElementsByTagName("body")[0].style.setProperty('--' + key, themeConfig[key]);

方案二:Less在线编译

  • 在html文件中通过link引入less文件以及less.js文件(必须是要在html中引入这两个,且less文件必须处于public文件夹下,否则不会生效)
  • 通过less的在线编辑方法modifyVars,来实现换肤的效果
    在这里插入图片描述
window.less.modifyVars(config)

方案三:预备多套样式文件

  • 直接定义多套固定的皮肤less文件,直接切换,需要重启项目才可生效(若是css文件则无需重启)

主要利用的是直接在main.js内引入样式文件来实现
1、assets文件夹内定义多套less文件
2、找个地方写个可供更改变量值的地方,建议将值保存到storyage内
3、最后在main.js内获取到storyage内的值,而后将其作为名称动态import引入less文件
在这里插入图片描述

// 动态加载,刷新后生效
import(`./assets/theme/${baseURL}.less`)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络套接字1

网络套接字1 📟作者主页:慢热的陕西人 🌴专栏链接:Linux 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 本博客主要内容讲解了udp的Linux环境下的使用&#xff0c…

鼠标在QTreeView、QTableView、QTableWidget项上移动,背景色改变

目录 1. 前言 2. 需求 3. 功能实现 3.1. 代码实现 3.2. 功能讲解 4. 附录 1. 前言 本博文用到了Qt的model/view framework框架,如果对Qt的“模型/视图/委托”框架不懂,本博文很难读懂。如果不懂这方面的知识,请在Qt Assistant 中输入Model/View…

一款适合程序员开发复杂系统的通用平台——JNPF 开发平台

在过去,很多开发工具更侧重代码编辑,针对数据库增删改查(CRUD)类的 Web 系统开发,在界面设计、前后端数据交互等环节主要还是靠写代码,效率比较低。目前很多所谓的低代码开发平台,大多数也都是基…

SQLServer数据库系列之:查询SQLServer数据库上面的连接信息、session信息、sql语句

SQLServer数据库系列之:查询SQLServer数据库上面的连接信息、session信息、sql语句 一、查询数据库上的连接信息二、查询SQLServer数据库的session信息SQLServer数据库从入门到精通系列文章之:SQLServer数据库百篇技术文章汇总 数据库专栏系列文章阅读传送门:详细整理汇总M…

超越 Siri 和 Alexa:探索LLM(大型语言模型)的世界

揭秘LLM:语言模型新革命,智能交互的未来趋势 近年来,虚拟助手的世界发生了重大转变。 虽然 Siri 和 Alexa 本身就是革命性的,但一种称为大型语言模型 (LLM) 的新型人工智能正在将虚拟助手的概念提升到一个全新的水平。 在这篇博文…

农业四情监测系统---气象科普

农业四情监测系统是一个集环境数据采集、分析与决策支持于一体的智能化系统。它主要通过对农田的土壤、气候、作物生长及病虫害等四个关键要素的实时监测,为农业生产提供精准的数据支持和科学的决策依据。 在土壤方面,系统能够检测土壤温度、湿度、pH值及…

我终于解决MathPage.wll文件找不到问题|(最新版Word上亲测)运行时错误,53’: 文件未找到:athPage.WLL

1、问题症状: 运行时错误,53’: 文件未找到:athPage.WLL 2、 解决方案 第一步 首先我们要先找到MathType安装目录下MathPage.wll文件,直接在此电脑中搜索MathPage.wll,找到文件所在位置。 第二步 打开Word文件&#xff0c…

App拉起微信小程序参考文章

App拉起微信小程序参考文章h5页面跳转小程序-----明文URL Scheme_weixin://dl/business/?appid*appid*&path*path*&qu-CSDN博客文章浏览阅读561次,点赞16次,收藏5次。仅需两步,就能实现h5跳转小程序,明文 URL Scheme&…

Linux---多线程(上)

一、线程概念 线程是比进程更加轻量化的一种执行流 / 线程是在进程内部执行的一种执行流线程是CPU调度的基本单位,进程是承担系统资源的基本实体 在说线程之前我们来回顾一下进程的创建过程,如下图 那么以进程为参考,我们该如何去设计创建一个…

闭包表(Closure Table)存储和查询树形数据结构

闭包表通过在关系表中记录树节点之间的直接和间接关系来表示节点之间的层次结构,目的是支持高效的树遍历和查询操作。 一、创建闭包表 CREATE TABLE departments (id int NOT NULL COMMENT ID,name varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_…

Redis冲冲冲——Redis持久化方式及其区别

目录 引出Redis持久化方式Redis入门1.Redis是什么?2.Redis里面存Java对象 Redis进阶1.雪崩/ 击穿 / 穿透2.Redis高可用-主从哨兵3.持久化RDB和AOF4.Redis未授权访问漏洞5.Redis里面安装BloomFilte Redis的应用1.验证码2.Redis高并发抢购3.缓存预热用户注册验证码4.R…

掌握React中的useCallback:优化性能的秘诀

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

XWPFDocument中XmlCursor的使用

类名&#xff1a; org.apache.xmlbeans Interface XmlCursor版本&#xff1a; 原xml代码&#xff1a; <w:p w14:paraId"143E3662" w14:textId"4167FBA7" w:rsidR"001506F2" w:rsidRPr"003F3D89" w:rsidRDefault"001506F2&qu…

OpenStack安装步骤

一、准备OpenStack安装环境 1、创建实验用的虚拟机实例。 内存建议16GB&#xff08;8GB也能运行&#xff09;CPU&#xff08;处理器&#xff09;双核且支持虚拟化硬盘容量不低于200GB&#xff08;&#xff01;&#xff09;网络用net桥接模式 运行虚拟机 2、禁用防火墙与SELin…

2024会声会影永久免费版新功能软件特色及新功能

会声会影2024永久免费版是一款收到很多用户公认的极佳视频编辑软件&#xff0c;里面的每一个功能都特别的强悍你能够一键给图片视频添加特效非常的过瘾&#xff0c;赶快来一起下载试试吧。 会声会影2023-安装包&#xff1a; https://souurl.cn/gtyDFc 会声会影2023-安装包&…

Golang 开发实战day03 - Arrays Slices

Golang 教程03 - Arrays&#xff0c;Slices Go语言中的数组和切片都是用于存储数据的类型&#xff0c;但它们之间存在一些重要的区别。了解这些区别对于有效地使用它们至关重要。 1. Arrays 数组 1.1 定义 数组是一种固定大小的数据结构&#xff0c;用于存储相同类型的值。…

web基础05-jQuery

目录 一、jQuery 1.概述 2.原生js与jQuery对比 3.特点 4.使用 &#xff08;1&#xff09;入口函数 &#xff08;2&#xff09;语法 &#xff08;3&#xff09;jQuery选择器 5.方法 &#xff08;1&#xff09;获取属性值&#xff1a; &#xff08;2&#xff09;删除属…

TCP三次握手,四次挥手状态转移过程

1.TCP状态转移过程 TCP连接的任意一端都是一个状态机,在TCP连接从建立到断开的整个过程中,连接两端的状态机将经历不同的状态变迁.理解TCP状态转移对于调试网络应用程序将有很大的帮助. 2.三次握手状态转换 3.四次挥手状态转换 4.TIME WAIT状态详解 为什么要有一个"TIME…

【网络安全】-数字证书

数字证书 数字证书是互联网通讯中用于标志通讯各方身份信息的一串数字或数据&#xff0c;它为网络应用提供了一种验证通信实体身份的方式。具体来说&#xff0c;数字证书是由权威的证书授权&#xff08;CA&#xff09;中心签发的&#xff0c;包含公开密钥拥有者信息以及公开密…

c# 调用ip2region组件 根据ip地址进行定位归属地运营商

需求描述&#xff1a;当项目中需要将IP转换成对应的归属地以及运营商&#xff0c;那么通过ip2region组件即可完美实现。 p2region本身支持net4.5以上&#xff0c;还有个ip2region.net组件&#xff0c;它要求net6及以上。所以&#xff0c;根据自己项目的需求即可选择其中一种方…
最新文章