当前位置: 首页 > 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;返回其最大和。 子数组是数组…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...