vue自定义主题皮肤方案

news2024/12/28 22:01:37

方案一: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.coloradmin.cn/o/1508996.html

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

相关文章

nodejs版本过高导致vue-cli项目无法正常运行解决方案

95% emitting CompressionPlugin ERROR Error: error:0308010C:digital envelope routines::unsupported 方法一:在使用 npm run dev之前使用 set NODE_OPTIONS--openssl-legacy-provider Error: error:0308010C:digital envelope routines::unsupported 解决方法…

UI自动化、性能、API测试一体平台:RunnerGo

UI自动化测试已经成为现代软件开发过程中不可或缺的一部分。它能够提供诸多优势,包括提高测试效率、减少人力成本、提升软件质量等。同时,可视化工具为UI自动化测试带来了更多便利和灵活性。RunnerGo近期上线脚本录制器,根据你的测试操作直接…

【基础计算机网络2】物理层——通信基础

【前言回顾】 【考纲内容】 一、物理层的基本概念 1.1 物理层的主要任务 物理层解决如何在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒介。物理层的主要任务:确定与传输媒体接口有关的一些特性。 1.2 物理层的一些特性 机械特性…

前端报错404,nginx正常、gateway没有转发请求

问题描述:前端报错 404 Not Found 原因:nacos中对应服务没有上线,下线后,可以启动本地服务,然后在测试上调试代码。!! 记住重启对应服务,也不会自动上线。

STM32CubeMX 配置 STM32F103 工程:通过DAC输出正弦波

说明:STM32CubeMX 配置 STM32F103 工程,通过DAC输出正弦波,参考代码可自动计算频率,自动计算正弦数据。 先参考这篇文章配置时钟、工程输出的设置: STM32CubeMX 配置 STM32F103 工程:通过DAC生成三角波、…

基于PLC的城市智能交通灯三路口控制系统设计26.06

摘要 可编程控制器(Programmable Logic Controller)简称PLC。是一种综合了通讯、自动控制和计算机技术发展而来的主要用于工业生产的自动控制系统。PLC运用数字运算操作系统,采用可编程序存储器,来于储存内部程序。执行逻辑运算、定时控制、顺序控制、计…

Elastic Stack--08--SpringData框架

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 SpringData[官网: https://spring.io/projects/spring-data](https://spring.io/projects/spring-data) Spring Data Elasticsearch 介绍 1.SpringData-…

Python速度大比拼:与主流编程语言的速度对决

在评估用于具体业务的编程语言时,经常考虑的一个关键指标之一是执行速度。Python以其简单性和可读性而闻名,但有时却因其性能而受到质疑。在这个领域,我们需要深入比较分析Python在执行速度方面与其他流行的编程语言相比的情况。 程语言执行速…

lucky-canvas实现老虎机、九宫格和大转盘抽奖

lucky-canvas是一款开源免费的基于 jscanvas 的前端插件,UI精美,功能强大,使用起来比较方便。 lucky-canvas官网https://100px.net/ 一、使用 注意:下例是vue中的应用,具体还有js和uniapp中的应用,详细查…

pandas plot函数:数据可视化的快捷通道

一般来说,我们先用pandas分析数据,然后用matplotlib之类的可视化库来显示分析结果。而pandas库中有一个强大的工具--plot函数,可以使数据可视化变得简单而高效。 1. plot 函数简介 plot函数是pandas中用于数据可视化的一个重要工具&#xff0…

2.ElasticSearch 高级查询语法Query DSL实战

1. ES高级查询Query DSL ES中提供了一种强大的检索数据方式,这种检索方式称之为Query DSL(Domain Specified Language 领域专用语言) , Query DSL是利用Rest API传递JSON格式的请求体(RequestBody)数据与ES进行交互,这种方式的丰富查询语法让…

药业“钉”上云端:与钉钉共舞数字化新时代

在信息化、智能化的时代背景下,药业行业的经营管理面临着巨大的机遇与挑战。一家药业公司经营范围广泛,拥有各种传统药物配方,同时现代化的新物流线和ERP系统支持公司能够更好的运营。该药业公司与无雀科技商谈后,决定与钉钉平台合…

<Linux> 初识线程

目录 前言: 一、什么是线程 (一)基本概念 (二)线程理解 (三)线程与进程的关系 (四)简单实用线程 (五)重谈虚拟地址空间 1. 页表的大小 2…

信息安全、网络安全以及数据安全三者之间的区别

随着信息技术的飞速发展,网络安全、信息安全、数据安全等词汇在平时出现的频率越来越高,尤其是数据安全,是大家都关心的一个重要话题。事实上,有很多人对网络安全、信息安全、数据安全的概念是区分不清的,下面由我帮大…

Yolov8-pose关键点检测:特征融合涨点篇 | 广义高效层聚合网络(GELAN) | YOLOv9

💡💡💡本文独家改进:即结合用梯度路径规划(CSPNet)和(ELAN)设计了一种广义的高效层聚合网络(GELAN),高效结合YOLOv8-pose,实现涨点。 将GELAN添加在backbone和head处,提供多个yaml改进方法 Yolov8-Pose关键点检测专栏介绍:https://blog.csdn.net/m0_6377421…

二维数组的传递和返回

指针和二维数组 指针存储的是内存单元的地址,当使用引用运算符 *,或者变址运算符 [ ] 时才能将指针所指向的内存单元中的值取出。 指针有两个关键属性: 1.它存储的是内存地址 2.它存储的是什么类型变量的内存地址,这一点非常…

盛元广通粮油质量检测实验室管理系统

近年来对于食品安全问题层出不穷,为提高粮食检测中心管理水平,关系到千千万万的消费者的健康饮食问题,粮油作为老百姓日常生活饮食必需品、消耗品,需从源头上对粮食在本省(区、市、县)不同粮食品种检测检测…

vulhub靶场-matrix-breakout-2-morpheus

下载&部署 从官网中下载 https://www.vulnhub.com/entry/matrix-breakout-2-morpheus,757/ 下载完成后,在vmware中打开,选择刚刚下载的ova文件 vmware打开文件后需要将刚导入的机器重新启动 再检查下网卡是否是和kali在同一张网卡下就可以开始打靶了…

使用Amazon Bedrock托管的Claude3 学习中国历史

最近被Amazon Bedrock托管的Claude3 刷屏了,那么先简单介绍下什么是Claude 3。 Claude 3是Anthropic 推出了下一代 Claude模型,针对不同用例进行优化的三种先进模型:Claude 3 Haiku、Claude 3 Sonnet 和 Claude 3 Opus,使用户能够…

【Hadoop大数据技术】——HDFS分布式文件系统(学习笔记)

📖 前言:Hadoop的核心是HDFS(Hadoop Distributed File System,Hadoop分布式文件系统)和MapReduce。其中,HDFS是解决海量大数据文件存储的问题,是目前应用最广泛的分布式文件系统。 目录 &#x…