Vue主题色实现
主题色实现
情境
配置平台支持多个主题色的选择,用户可通过在配置平台选择项目主题色。前端项目在骨架屏加载页面获取配置信息,设置项目主题色,实现同个项目不同主题色渲染的需求
实现
1.定义主题色变量
不同主题色根据不同js文件划分定义,根据不同主题区别设置对应的样式变量
// blueTheme.js
export default {'main-color': '#314360','main-color-8': '#314360CC','main-color-6': '#31436099','main-color-1': '#3143601A',...
}
2.定义主题色切换函数
封装主题色切换函数,用于根据配置参数切换主题色变量
// triggerTheme.js
// 目前支持五种主题色选择
import blueTheme from './blueTheme'
import orangeTheme from './orangeTheme'
import redTheme from './redTheme'
import greenTheme from './greenTheme'
import blackTheme from './blackTheme'let targetTheme = {}export function triggerTheme(themeName) {switch(themeName) {case 'orange':targetTheme = orangeThemebreakcase 'red':targetTheme = redThemebreakcase 'green':targetTheme = greenThemebreakcase 'black':targetTheme = blackThemebreakdefault:targetTheme = blueThemebreak}for (let prop in targetTheme) {document.body.style.setProperty(`--${prop}`, targetTheme[prop])}
}// 支持部分API渲染相关函数式调用时主题色获取
export function getColor(prop) {return targetTheme[prop]
}
3.骨架屏页面切换主题色
需要在类似加载、骨架屏页面或者无主题色页面切换主题色,避免主题色切换造成的页面异常
// skeleton.vue
import { triggerTheme } from '@/theme/triggerTheme'
created() {this.init()
},
async init() {let resp = await getTenantInfo()triggerTheme(resp.data.theme)
}
相关文章:
Vue主题色实现
主题色实现 情境 配置平台支持多个主题色的选择,用户可通过在配置平台选择项目主题色。前端项目在骨架屏加载页面获取配置信息,设置项目主题色,实现同个项目不同主题色渲染的需求 实现 1.定义主题色变量 不同主题色根据不同js文件划分定…...
ChartLlama: A Multimodal LLM for Chart Understanding and Generation论文阅读
原文链接:https://arxiv.org/abs/2311.16483 代码与数据集:https://tingxueronghua.github.io/ChartLlama/ 本文启发:文章提出利用GPT-4合成大量图表数据,这些数据包含各种图表类型,包含丰富的instruction data。然后…...
ByteCinema(1):用户的登录注册
文章目录 主要功能生成图形验证码redis滑动窗口操作限流0.限流设计的必要性1.原理2.代码(邮箱发验证码为例)3. 问题与解决高并发环境下redis操作的原子性过时数据的积累 续约token实现长期登录0.设计的出发点1.前置知识:JWT什么是 JWT?JWT 的…...
电力电网电线变电站输电线绝缘子无人机类数据集/农业植物病虫害类数据集/光伏板/工程煤矿矿场类数据集/道路类数据集
电力电网电线变电站输电线红外缺陷类数据集 传送门链接: 1.电线覆盖物检测数据集 气球风筝鸟巢 1300张 voc yol-CSDN博客 2.变电站可见光缺陷数据集数据集包含8376张巡检图像,带xml标签,共包含17类巡检标签!具体缺陷分类见下图!…...
深度学习之表示学习 - 引言篇
序言 在数据爆炸的今天,如何从纷繁复杂的信息中抽取有价值的知识,成为了人工智能领域亟待解决的核心问题。深度学习,作为机器学习的一个重要分支,以其强大的特征表示能力和自动化学习特性,引领了这场数据革命的浪潮。…...
Linux驱动开发 ——架构体系
只读存储器(ROM) 1.作用 这是一种非易失性存储器,用于永久存储数据和程序。与随机存取存储器(RAM)不同,ROM中的数据在断电后不会丢失,通常用于存储固件和系统启动程序。它的内容在制造时或通过…...
Django一分钟:lookupAPI详解,使用django orm生成高效的WHERE子句
一、Lookup API概述 Lookup API是Django用于构建数据库查询WHERE子句的API。 Lookup API的核心包含两部分: RegisterLookupMixin:为子类提供注册lookup的方法Query Expression API:一个接口,规定了可以被注册为lookup的类需要实…...
信息安全工程师(8)网络新安全目标与功能
前言 网络新安全目标与功能在当前的互联网环境中显得尤为重要,它们不仅反映了网络安全领域的最新发展趋势,也体现了对网络信息系统保护的不断加强。 一、网络新安全目标 全面防护与动态应对: 目标:建立多层次、全方位的网络安全防…...
返利机器人在电商返利系统中的负载均衡实现
返利机器人在电商返利系统中的负载均衡实现 大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天我们来聊一聊如何在电商返利系统中实现返利机器人的负载均衡,尤其是在面对高并发和大量…...
MATLAB中typecast函数用法
目录 语法 说明 示例 将整数转换为相同存储大小的无符号整数 将 8 位整数转换为单精度 将 32 位整数转换为 8 位整数 将 8 位整数转换为 16 位整数 提示 typecast函数的功能是在不更改基础数据的情况下转换数据类型。 语法 Y typecast(X,type) 说明 Y typecast(X,…...
植物大战僵尸【源代码分享+核心思路讲解】
植物大战僵尸已经正式完结,今天和大家分享一下,话不多说,直接上链接!!!(如果大家在运行这个游戏遇到了问题或者bug,那么请私我谢谢) 大家写的时候可以参考一下我的代码思…...
变压器设备漏油数据集 voc txt
变压器设备漏油数据集 油浸式变压器通常采用油浸自冷式、油浸风冷式和强迫油循环三种冷却方式。该数据集采集于油浸式变压器的设备漏油情况,一般用于变电站的无人巡检,代替传统的人工巡检,与绝缘子的破损检测来源于同一课题。数据集一部分来自…...
算法练习题25——leetcode3279统计重新排列后包含另一个字符串的子字符串的数目(滑动窗口 双指针 哈希)
题目描述 解题思路 本题用到了滑动窗口 双指针 哈希 刚开始我是没读懂题的因为我笨 我想把我的思路说一下 左端不轻易缩小 只有找到跟word2匹配了 比如说abbcdd 遍历到c的时候才能匹配这个word2 对吧 那么之后加上以一个d或者俩d 都符合了 然后我们算完了 才能缩小左端 扩大…...
JavaEE: 深入探索TCP网络编程的奇妙世界(二)
文章目录 TCP核心机制TCP核心机制二: 超时重传为啥会丢包?TCP如何对抗丢包?超时重传的时间设定超时时间该如何确定? TCP核心机制 前一篇文章 JavaEE: 深入探索TCP网络编程的奇妙世界(一) 书接上文~ TCP核心机制二: 超时重传 在网络传输中,并不会一帆风顺,而是可能出现&qu…...
GPT1-GPT3论文理解
GPT1-GPT3论文理解 视频参考:https://www.bilibili.com/video/BV1AF411b7xQ/?spm_id_from333.788&vd_sourcecdb0bc0dda1dccea0b8dc91485ef3e74 1 历史 2017.6 Transformer 2018.6 GPT 2018.10 BERT 2019.2 GPT-2 2020…...
C/C++内存管理 ——
目录 五、C/C内存管理 1、C/C内存分布 2、C语言中动态内存管理方式:malloc/calloc/realloc/free 3、C内存管理方式 1.new/delete操作内置类型 2.new和delete操作自定义类型 4、operator new与operator delete函数 5、new和delete的实现原理 1.内置类…...
深度学习02-pytorch-04-张量的运算函数
在 PyTorch 中,张量(tensor)运算是核心操作之一,PyTorch 提供了丰富的函数来进行张量运算,包括数学运算、线性代数、索引操作等。以下是常见的张量运算函数及其用途: 1. 基本数学运算 加法运算:…...
OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【文件系统】上
往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ 子系统开发内核 轻量系统内核(LiteOS-M) 轻量系统内核&#…...
NISP 一级 | 8.4 《网络安全法》
关注这个证书的其他相关笔记:NISP 一级 —— 考证笔记合集-CSDN博客 2017 年 6 月 1 日,《中华人民共和国网终安全法》(以下简称《网终安全法》)正式实施。这是我国第一部全面规范网络空间安全管理方面问题的基础性法律࿰…...
实现人体模型可点击
简化需求:实现项目内嵌人体模型,实现点击不同部位弹出部位名称 一:优先3d, 方案:基于three.js,.gltf格式模型,vue3 缺点:合适且免费的3d模型找不到,因为项目对部位有要…...
从CRUD到AI大神:小白程序员5个月逆袭之路(收藏版)
本文分享了作者从传统CRUD工程师转型为AI应用工程师的心路历程。通过实战先行、深入学习、项目巩固三个阶段,作者逐步掌握了AI模型开发、部署和服务化能力,并成功开发了多个AI应用项目。文章强调实践导向的学习方法,建议程序员利用AI工具提升…...
1987年7月14日晚上19-21点出生性格、运势和命运
1987年6月28日,距离二十四节气中的“小暑”(通常在7月6-8日)约8-10天。小暑意为“天气开始炎热但未到极致”,是盛夏的序曲。这个时节的哲学,与个人成长有着奇妙的呼应。性格的“小暑特质”:温润与韧性 小暑…...
YimMenu:GTA5游戏增强工具从入门到精通完全指南
YimMenu:GTA5游戏增强工具从入门到精通完全指南 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...
软考系统架构设计师实战论文集:自动驾驶与AI云端架构演进
【引言】 自动驾驶的下半场,早已不再局限于单车智能的角逐,而是演变成了一场关乎云端算力、海量数据治理与大模型工程化的全面战役。当接入的车辆规模突破百万级,当每日回传的工况数据达到 PB 级,云端数据平台的可靠性、扩展性与…...
【Prompt实战】零样本(Zero-shot)与少样本(Few-shot)提示在用例生成中的对比
目录 一、开篇:一个测试工程师的真实困境 二、基础概念:零样本与少样本的本质区别 三、学术界怎么说:最新实证研究深度解读...
《最终的数据解读指南》
原文:towardsdatascience.com/the-ultimate-guide-to-making-sense-of-data-aaa121db1119?sourcecollection_archive---------0-----------------------#2024-06-04 来自 Uber、Meta 和高速成长初创公司的 10 年经验教训 https://medium.com/twalbaum?sourcepost…...
ElevenLabs芬兰语TTS部署踩坑实录(含CI/CD流水线集成模板):1次失败=2.3小时调试,我们帮你省下87%时间
更多请点击: https://kaifayun.com 第一章:ElevenLabs芬兰语TTS部署踩坑实录(含CI/CD流水线集成模板):1次失败2.3小时调试,我们帮你省下87%时间 核心痛点:芬兰语语音合成的隐性陷阱 ElevenLab…...
如何一键保存整个网页?告别滚动拼接的终极解决方案
如何一键保存整个网页?告别滚动拼接的终极解决方案 【免费下载链接】full-page-screen-capture-chrome-extension One-click full page screen captures in Google Chrome 项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chrome-extensio…...
如何快速掌握UV-UI框架:面向开发者的完整跨平台开发实战指南
如何快速掌握UV-UI框架:面向开发者的完整跨平台开发实战指南 【免费下载链接】uv-ui uv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端基于uni-app和uView2.x的生态框架,支持单独导入,开箱即用,利剑出击。 项目地址: https://…...
这五家软件许可优化的公司,我直接说结论。
你要是搞工程设计软件的(CAD、SolidWorks、CATIA这些),在国内,闭眼找。 你要是啥软件都有一大堆,不差钱人也多,上OptiCore(优化内核)。 你要是全在云上跑、主用微软全家桶…...
