当前位置: 首页 > news >正文

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`)

相关文章:

vue自定义主题皮肤方案

方案一:CSS变量换肤(推荐) 利用css定义变量的方法,用var在全局定义颜色变量(需将变量提升到全局即伪类选择器 :root)然后利用js操作css变量,document.getElementsByTagName(‘body’)[0].style…...

iOS中使用schema协议调用APP和使用iframe打开APP的例子

大家好我是咕噜美乐蒂,很高兴又和大家见面了! 当调用自定义 URL scheme 或使用 iframe 打开应用程序时,可以采取以下详细步骤: 使用自定义 URL scheme 协议调用应用程序 1.首先,确认目标应用程序已经注册了自定义 U…...

2024.3.11

提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 #include <iostream> #include<string> using namespace std;int main() {cout << "please input a string:" << endl;string str;g…...

Web服务器需要警惕的一些安全隐患

Web服务器需要警惕的一些安全隐患有哪些&#xff0c;今天德迅云安全就带您来了解下。熟悉了解了就知道怎么规避风险。不过无论是什么漏洞&#xff0c;都体现着安全是一个整体的真理&#xff0c;考虑Web服务器的安全性&#xff0c;必须要考虑到与之相配合的操作系统。 1.物理路径…...

MinGW-w64的下载与安装

文章目录 1 下载2 安装3 配置环境变量4 验证 1 下载 官网地址&#xff1a;https://www.mingw-w64.org/github地址&#xff1a;https://github.com/niXman/mingw-builds-binaries/releases windows下载 跳转github下载 版本号选择&#xff1a;13.2.0是GCC的版本号&#xff1b…...

docker使用笔记

查看本机上所有镜像 docker images打包项目&#xff08;打包完成后自动载入镜像&#xff09; The command docker build -t search-server . you provided is a standard way to build a Docker image. The -t flag tags the resulting image, and search-server is the tag …...

新规正式发布 | 百度深度参编《生成式人工智能服务安全基本要求》

2024年2月29日&#xff0c;全国网络安全标准化技术委员会&#xff08; TC260 &#xff09;正式发布《生成式人工智能服务安全基本要求》&#xff08;以下简称《基本要求》&#xff09;。《基本要求》规定了生成式人工智能服务在安全方面的基本要求&#xff0c;包括语料安全、模…...

2024年AI辅助研发的趋势和影响

摘要&#xff1a;随着人工智能技术的迅猛发展&#xff0c;2024年AI辅助研发正成为科技界和工业界的瞩目焦点。本文将探讨AI辅助研发在各个领域的应用和影响&#xff0c;并展望2024年AI辅助研发的趋势。 引言 随着人工智能技术的不断进步&#xff0c;AI辅助研发正逐渐渗透到各…...

2k_Day1:今天是设计模式的大白话1

大白话&#xff1a; 原则有一点很难做到&#xff0c;就是定义好的类&#xff0c;只能加不能改&#xff08;开放-关闭原则&#xff09; 1.工厂模式就是&#xff0c;比如你定了一个汽车接口&#xff0c;然后小车、中车、大车都继承这个接口&#xff0c;这时&#xff0c;定一个汽…...

面试官:说说你对事件循环的理解

一、事件循环是什么 首先&#xff0c;JavaScript是一门单线程的语言&#xff0c;意味着同一时间内只能做一件事&#xff0c;但是这并不意味着单线程就是阻塞&#xff0c;而实现单线程非阻塞的方法就是事件循环 在JavaScript中&#xff0c;所有的任务都可以分为 同步任务&#…...

【SpringCloud微服务实战03】Nacos 注册中心

一、Nacos安装 官方文档安装Nacos教程:Nacos 快速开始 这里安装的是1.4.7版本,安装之后访问http://127.0.0.1:8848/nacos 管理界面如下:(用户名:nacos,密码:nacos) 二、Nacos服务注册和发现 1、在父工程中配置文件pom.xml 中添加spring-cloud-alilbaba的管理依赖:…...

FLatten Transformer_ Vision Transformer using Focused Linear Attention

paper: https://arxiv.org/abs/2308.00442 code: https://github.com/LeapLabTHU/FLatten-Transformer 摘要 当将transformer模型应用于视觉任务时&#xff0c;自注意的二次计算复杂度( n 2 n^2 n2)一直是一个持续存在的挑战。另一方面&#xff0c;线性注意通过精心设计的映射…...

STM32CubeMX学习笔记17--- FSMC

1.1 TFTLCD简介 TFT-LCD&#xff08;thin film transistor-liquid crystal display&#xff09;即薄膜晶体管液晶显示器。液晶显示屏的每一个像素上都设置有一个薄膜晶体管&#xff08;TFT&#xff09;&#xff0c;每个像素都可以通过点脉冲直接控制&#xff0c;因而每个节点都…...

【MogDB】实战MogDB数据库适配Halo博客系统1.6版本(基于springframework+hibernate+HikariPool)

前言 前一篇文章说了MogDB适配Halo,【MogDB】将流行的博客系统Halo后端的数据库设置为MogDB,但是适配的是2.x版本&#xff0c;由于2.x版本已经引入了对postgresql的支持&#xff0c;而MogDB对于postgresql有很好的兼容性&#xff0c;因此适配起来很简单。但是由于halo2.x的版本…...

Python与FPGA——局部二值化

文章目录 前言一、局部二值化二、Python局部二值化三、FPGA局部二值化总结 前言 局部二值化较全局二值化难&#xff0c;我们将在此实现Python与FPGA的局部二值化处理。 一、局部二值化 局部二值化就是使用一个窗口&#xff0c;在图像上进行扫描&#xff0c;每扫出9个像素求平均…...

shell文本处理工具-shell三剑客1

shell脚本常用基础命令2 shell脚本常用基础命令 shell脚本常用基础命令2一、grep用法二、sed用法2.1p参数 &#xff08;显示&#xff09;n参数&#xff08;只显示处理过的行&#xff09; 文本处理三剑客&#xff1a;grep sed awk 一、grep用法 grep -E egrep (扩展搜索正文表…...

函数的传入参数-传参定义

基于函数的定义语法&#xff1a; def 函数名&#xff08;传入参数&#xff09;函数体return 返回值 可以有如下函数定义&#xff1a; def add(x,y):return xyprint(f"{x} {y}的结果是&#xff1a;{result}") 实现了&#xff0c;每次计算的是xy&#xff0c;而非…...

主流接口测试框架对比,究竟哪个更好用

公司计划系统的开展接口自动化测试&#xff0c;需要我这边调研一下主流的接口测试框架给后端测试&#xff08;主要测试接口&#xff09;的同事介绍一下每个框架的特定和使用方式。后端同事根据他们接口的特点提出一下需求&#xff0c;看哪个框架更适合我们。 需求 1、接口编写…...

常用python模板

1.简单脚本模板 def main():#代码逻辑if __name__"__main__":main() 2.类定义模板 Class Myclass:def __init__(self,parameter):self.parameterparameterdef my_method(self):#方法逻辑 3.函数定义模板 def my_function(parameter):#代码逻辑return result 4.…...

53. 最大子数组和(力扣LeetCode)

文章目录 53. 最大子数组和题目描述暴力&#xff08;运行超时&#xff09;贪心 53. 最大子数组和 题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组是数组…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...