vue2 切换主题色以及单页面好使方法
今天要新增一个页面要根据不同公司切换不同页面主题色，一点一点来，怎么快速更改 el-pagination 分页组件主题色。
<el-pagination :page-size="pageSize" :pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total">
</el-pagination>默认样式是这样的
现在变成红色主题
<style lang="scss">
.el-pagination {.el-pager li.active {color: #de194d;cursor: default;}.el-pager li:not(.disabled):hover {color: #de194d;}button.btn-next:not(:disabled) .el-icon-arrow-right:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled) .el-icon-arrow-left:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled):hover {color: #de194d;}button.btn-next:not(:disabled):hover {color: #de194d;}.el-input__inner:hover {border-color: #de194d !important;}.el-input__inner:focus {border-color: #de194d !important;}.el-select .el-input.is-focus .el-input__inner {border-color: var(--theme-color);}
}.el-select-dropdown__item.selected {color: #de194d;
}
</style>
当然 style 不能加 scoped ,可以当独加一个不带 scoped 的 style。
如果加 scoped 用下面这种方式
<style lang="scss" scoped>
::v-deep.el-pagination {.el-pager li.active {color: #de194d;cursor: default;}.el-pager li:not(.disabled):hover {color: #de194d;}button.btn-next:not(:disabled) .el-icon-arrow-right:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled) .el-icon-arrow-left:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled):hover {color: #de194d;}button.btn-next:not(:disabled):hover {color: #de194d;}.el-input__inner:hover {border-color: #de194d !important;}.el-input__inner:focus {border-color: #de194d !important;}.el-select .el-input.is-focus .el-input__inner {border-color: var(--theme-color);}
}::v-deep.el-select-dropdown__item.selected.hover {color: #de194d !important;font-size: 50px
}
</style>
<style>
.el-select-dropdown__item.selected {color: #de194d !important;
}
</style>自己写太麻烦，element-ui 提供更换主题方法
建一个 theme.scss 文件
/* 改变主题色变量 */
$--color-primary: #f0a70b;/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";更改 main.js 注释 element-ui 样式的导入，改为 theme.scss。因为样式都是一样的，没有必要引入两次
// import 'element-ui/lib/theme-chalk/index.css';
import './theme.scss'
这是 element 组件可以简单设置更改，那么我自己写的组件怎么简单实现更改主题色呢？
vue2 可以 scss 的全局变量
在 src 目录新建全局变量文件 theme.scss
/* 改变主题色变量 */
$--theme-color: #e61111;vue.config.js
module.exports = defineConfig({css: {loaderOptions: {scss: {additionalData: `@import "@/theme.scss";`}}}
})路径一定要配置正确
然后页面就可以用 color: $--theme-color; 方式引用了。
另一种方式是使用 :root，:root 是一个伪类选择器，它用来匹配文档的根元素。在HTML文档中，:root 实际上总是指向 <html> 元素。:root 的主要用途是定义一个全局的CSS变量。
但是 :root 比设置 html 元素更好用，:root 是伪类选择器。html 是标签选择器。所以:root 的优先级大于 html。
theme.scss
/* 改变主题色变量 */
:root {--theme-color: #e61111;
}引用
color: var(--theme-color);更改主题色，在任一页面都可以，但不能设置 scoped 不然不好使
<style lang="scss">
:root {--theme-color: rgb(164, 240, 11);
}
</style>但这有个问题，他会把全站的样式都变更了，后加载的 :root 会把父组件或是先设置的组件样式覆盖了，如果只想在当前页面变更主题色可能不行。
解决办法，可以在子组件根元素中重新设置全局变量值，这样就只会在子组件生效不会影响用 :root 的其它父组件和兄弟组件了。
.hello {
--theme-color: rgb(164, 240, 11);
--font-size: 25px;
}
<template><div class="hello" style="margin-top: 50px; width: 850px"><el-pagination:page-size="pageSize":pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot":total="total"></el-pagination></div>
</template><script>
export default {name: "About",data() {return {currentPage: 1,pageSize: 10,pageCount: 9,total: 1000,};},
};
</script><style lang="scss" scoped>
.hello {--theme-color: rgb(164, 240, 11);--font-size: 25px;
}::v-deep.el-pagination {.el-pager li.active {color: var(--theme-color);cursor: default;}.el-pager li:not(.disabled):hover {color: var(--theme-color);}button.btn-next:not(:disabled) .el-icon-arrow-right:not(.disabled):hover {color: var(--theme-color);}button.btn-prev:not(:disabled) .el-icon-arrow-left:not(.disabled):hover {color: var(--theme-color);}button.btn-prev:not(:disabled):hover {color: var(--theme-color);}button.btn-next:not(:disabled):hover {color: var(--theme-color);}.el-input__inner:hover {border-color: var(--theme-color);}.el-input__inner:focus {border-color: var(--theme-color);}.el-select .el-input.is-focus .el-input__inner {border-color: var(--theme-color);}
}::v-deep.el-select-dropdown__item.selected.hover {color: var(--theme-color);font-size: 50px;
}
</style>
<style lang="scss">
.el-select-dropdown__item.selected {color: var(--theme-color);
}
</style>
那么现在假设根据不同公司进入这个子组件画面，怎么根据 props 值运用不同样式。
mounted() {const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector(".hello").classList.add("company1");} else if (companyId == 2) {document.querySelector(".hello").classList.add("company2");}}<style lang="scss" scoped>.company1 {--theme-color: rgb(164, 240, 11);--font-size: 25px;}.company2 {--theme-color: rgb(240, 11, 11);--font-size: 25px;}
</style>也可用下面这种方法直接设置 style
mounted() {const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector(".hello").style.setProperty("--theme-color", "rgb(164, 240, 11)");document.querySelector(".hello").style.setProperty("-font-size", "25px");} else if (companyId == 2) {document.querySelector(".hello").style.setProperty("--theme-color", "rgb(240, 11, 11)");document.querySelector(".hello").style.setProperty("-font-size", "25px");}},<style lang="scss" scoped>.company1 {--theme-color: rgb(164, 240, 11);--font-size: 25px;}.company2 {--theme-color: rgb(240, 11, 11);--font-size: 25px;}
</style>这样 url 参数 companyId 传不同的值，页面就会显示不同颜色。但是有些弹出层什么的直接放到 body 或 app 下面的。如果设置到 body 或 app 上会怎么样
放到 app 都不好使（注意这里是加了 scoped 不好使，如果加 scoped，跳转会影响其它页面）
const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector("#app").classList.add("company1");} else if (companyId == 2) {document.querySelector("#app").classList.add("company2");}下拉框样式没改过来
看源码发现下拉框 和 app 在同一级了，company2 设到 app 所以不好使
改为 body 下也不好使，组件切换时因为只是组件的显示或隐藏所以 body 和 app 的样式还在
解决方案一：可以在路由守卫里做处理，如果是当前子组件跳出那么就移除添加的样式。
router/index.js 路由文件
router.afterEach((to, from) => {if (from.path == '/about') {document.querySelector("body").classList.remove("company1");document.querySelector("body").classList.remove("company2");}
})解决方案二：使用 .has 选择器
<template><div class="hello" style="margin-top: 50px; width: 850px"><el-pagination:page-size="pageSize":pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot":total="total"></el-pagination></div>
</template>mounted() {const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector("body").classList.add("company1");} else if (companyId == 2) {document.querySelector("body").classList.add("company2");}},<style lang="scss">
.company1:has(.hello) {--theme-color: rgb(164, 240, 11);--font-size: 25px;
}
.company2:has(.hello) {--theme-color: rgb(240, 11, 11);--font-size: 25px;
}
</style>给 body 添加样式，用 .has(.hello) 使这个样式只有在有 class="hello" 的页面生效，.has(.hello) 意思是存在 .hello 的子组件生效，即使下拉框不是 .hello 的子元素也会生效。.hello 是当前子组件唯一拥有的。
解决方案二：根据不同 companyId 给组件绑定 class
<template class="childHas"><div :class="themeClass" style="margin-top: 50px; width: 850px"><el-pagination:popper-class="themeClass":page-size="pageSize":pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot":total="total"></el-pagination></div>
</template>computed: {themeClass() {const companyId = this.$route.query.companyId;let child = "";if (companyId == 1) {child = "childHas1";} else if (companyId == 2) {child = "childHas2";}return child;},},<style lang="scss">
.childHas1 {--theme-color: rgb(164, 240, 11);--font-size: 25px;
}
.childHas2 {--theme-color: rgb(240, 11, 11);--font-size: 25px;
}
</style>完美解决
相关文章：
vue2 切换主题色以及单页面好使方法
今天要新增一个页面要根据不同公司切换不同页面主题色，一点一点来，怎么快速更改 el-pagination 分页组件主题色。 <el-pagination :page-size"pageSize" :pager-count"pageCount"layout"sizes, prev, pager, next, jumper,…...
React学习———CSS Modules（样式模块化）
CSS Modules CSS Modules（样式模块化）是一种用于模块化和局部作用域化CSS样式的技术，让CSS只在当前组件内生效，避免全局样式冲突的技术方案 工作原理 文件命名：通常以.module.css、.module.less、.module.scss等结尾…...
MCP 与 Cloudflare 的结合：网络安全的新高度
MCP 与 Cloudflare 的结合：网络安全的新高度 在数字化时代，网络安全已经不只是某些行业的“专属问题”，而是所有企业、个人都必须面对的核心挑战。从 DDoS 攻击、数据泄露，到身份盗用，每一种网络威胁都可能带来巨大的损失。而这时候，微软 MCP（Microsoft Cloud Platform…...
JavaScript入门【1】概述
1.JavaScript是什么? <font style"color:rgb(38,38,38);">Javascript （简称“JS”）是⼀种直译式脚本语⾔，⼀段脚本其实就是⼀系列指令，计算机通过这些指令来达成⽬标。它⼜是⼀种动态类型的编程语⾔。JS⽤来在⽹…...
PyQt5 的使用
PyQt5 是 Python 里基于 Qt 框架的 GUI 开发工具，能做桌面应用，跨平台（Windows/macOS/Linux 都能用）。你可能想知道：怎么开始用？有哪些核心组件？怎么写界面逻辑？别急，咱们…...
JavaScript【6】事件
1.概述： 在 JavaScript 中，事件（Event）是浏览器或 DOM（文档对象模型）与 JavaScript 代码之间交互的一种机制。它代表了在浏览器环境中发生的特定行为或者动作，比如用户点击鼠标、敲击键盘、页面…...
STM32F10xx 参考手册
6. 什么是寄存器 本章参考资料：《STM32F10xx 参考手册》、《STM32F10xx数据手册》、 学习本章时，配合《STM32F10xx 参考手册》“存储器和总线架构”及“通用I/O(GPIO)”章节一起阅读，效果会更佳，特别是涉及到寄存器说明的部分。…...
使用Docker部署Nacos
sudo systemctl start docker sudo systemctl enable docker docker --version 步骤 2: 拉取 Nacos Docker 镜像 拉取 Nacos 镜像： 你可以从 Docker Hub 上拉取官方的 Nacos 镜像，使用以下命令： docker pull nacos/nacos-server 这会从 …...
深度学习中ONNX格式的模型文件
一、模型部署的核心步骤 模型部署的完整流程通常分为以下阶段，用 “跨国旅行” 类比： 步骤类比解释技术细节1. 训练模型学会一门语言（如中文）用 PyTorch/TensorFlow 训练模型2. 导出为 ONNX翻译成国际通用语言（如英语…...
TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性
Improving Transferability of Adversarial Samples via Critical Region-Oriented Feature-Level Attack 摘要-Abstract引言-Introduction相关工作-Related Work提出的方法-Proposed Method问题分析-Problem Analysis扰动注意力感知加权-Perturbation Attention-Aware Weighti…...
Redis 发布订阅模式深度解析：原理、应用与实践
在现代分布式系统架构中，实时消息传递机制扮演着至关重要的角色。Redis 作为一款高性能的内存数据库，其内置的发布订阅(Pub/Sub)功能提供了一种轻量级、高效的消息通信方案。本文将全面剖析 Redis 发布订阅模式，从其基本概念、工作原理到实际…...
环形缓冲区 ring buffer 概述
环形缓冲区 ring buffer 概述 1. 简介 环形缓冲区（ring buffer），是一种用于表示一个固定尺寸、头尾相连的缓冲区的数据结构，适合缓存数据流。也称作环形缓冲区（circular buffer），环形队列&…...
飞帆控件 post or get it when it has get
我在这里分享两个链接： post_get_it 设计 - 飞帆 有人看出来这个控件是干什么用吗？ 控件的配置：...
SQL里where条件的顺序影响索引使用吗？
大家好，我是锋哥。今天分享关于【SQL里where条件的顺序影响索引使用吗？】面试题。希望对大家有帮助； SQL里where条件的顺序影响索引使用吗？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 SQL 查询中，W…...
SAP学习笔记 - 开发豆知识02 - com.sap.cds.services.cds.CdsService 废止，那么用什么代替呢？
我看很多人代码里面用的都是这个CdsService类，可以自从2.0版本往上这个类就没了啊。 它的代替是什么呢？用的CqnService 那么怎么查的呢？ 我也是下载好几个包，解压看，然后发现这里还可以直接看，挺方便的。…...
OpenResty 深度解析：构建高性能 Web 服务的终极方案
引言 openresty是什么？在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列 我们分别从初始化阶段，重写/访问阶段，内容阶段，日志…...
什么是路由器环回接口？
路由器环回接口（LoopbackInterface）是网络设备中的一种逻辑虚拟接口，不依赖物理硬件，但在网络配置和管理中具有重要作用。以下是其核心要点： 一、基本特性 1.虚拟性与稳定性 环回接口是纯软件实现的逻辑接口&#x…...
OpenHarmony：开源操作系统重塑产业数字化底座
OpenHarmony：开源操作系统重塑产业数字化底座 引言：当操作系统成为数字公共品 在万物智联时代，操作系统不再是科技巨头的专属领地。华为捐赠的OpenHarmony项目，正以开源协作模式重构操作系统产业格局。这个脱胎于商业版本的开源…...
【MySQL进阶】如何在ubuntu下安装MySQL数据库
前言 🌟🌟本期讲解关于如何在ubuntu环境下安装mysql的详细介绍~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 dz…...
【数据结构】_二叉树
1.二叉树链式结构的实现 1.1 前置说明 在学习二叉树的基本操作前，需先要创建一棵二叉树，然后才能学习其相关的基本操作。由于现在大家对二叉树结构掌握还不够深入，为了降低大家学习成本，此处手动快速创建一棵简单的二叉树&#x…...
给图表组件上点“颜色” —— 我与 CodeBuddy 的合作记录
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 前段时间，我在开发一个 Vue3 项目的时候，碰到了一个小小的挑战：我想做一个可…...
使用 YOLO 结合 PiscTrace 实现股票走势图像识别
在智能投研和金融分析中，自动识别图表中的模式（如 K 线走势、支撑/阻力位、形态结构）成为一种新兴手段。传统的技术分析依赖大量人工判断，而计算机视觉技术的发展，特别是 YOLO 模型在图像识别领域的高效表现࿰…...
OpenCV中的光流估计方法详解
文章目录 一、引言二、核心算法原理1. 光流法基本概念2. 算法实现步骤 三、代码实现详解1. 初始化设置2. 特征点检测3. 光流计算与轨迹绘制 四、实际应用效果五、优化方向六、结语 一、引言 在计算机视觉领域，运动目标跟踪是一个重要的研究方向，广泛应用…...
OpenCL C++ 常见属性与函数
核心对象与属性 对象/属性描述示例cl::Platform表示OpenCL平台cl::Platform::get(&platforms)cl::Device表示计算设备cl::Device::getDefault()cl::Context管理设备、内存和命令队列的上下文cl::Context(contextDevices)cl::CommandQueue命令队列，用于提交命令cl::Command…...
Android核心系统服务：AMS、WMS、PMS 与 system_server 进程解析
1. 引言 在 Android 系统中，ActivityManagerService (AMS)、WindowManagerService (WMS) 和 PackageManagerService (PMS) 是三个最核心的系统服务，它们分别管理着应用的生命周期、窗口显示和应用包管理。 但你是否知道，这些服务并不是独立…...
18.自动化生成知识图谱的多维度质量评估方法论
文章目录 一、结构维度评估1.1 拓扑结构评估1.1.1 基础图论指标1.1.2 层级结构指标 1.2 逻辑一致性评估1.2.1 形式逻辑验证1.2.2 约束满足度 二、语义维度评估2.1 语义一致性评估2.1.1 标签语义分析2.1.2 关系语义评估 2.2 语义表示质量2.2.1 嵌入质量2.2.2 上下文语义评估 三、…...
【行为型之命令模式】游戏开发实战——Unity可撤销系统与高级输入管理的架构秘钥
文章目录 ⌨️ 命令模式（Command Pattern）深度解析一、模式本质与核心价值二、经典UML结构三、Unity实战代码（可撤销的建造系统）1. 定义命令接口与接收者2. 实现具体命令3. 命令管理器（Invoker）4. 客户端使…...
图论模板（部分）
图论模板（部分） maincpp #include <iostream> #include <climits> #include <limits>typedef unsigned long long ull; typedef long long ll; typedef long double ld; typedef std::pair<int, int> PII;#define rep(i, n) f…...
)
LeetCode 热题 100_寻找重复数（100_287_中等_C++）（技巧）(暴力解法；哈希集合；二分查找)
LeetCode 热题 100_寻找重复数（100_287_中等_C） 题目描述：输入输出样例：题解：解题思路：思路一（暴力解法）：思路二（哈希集合）：思路三&am…...
NBA足球赛事直播源码体育直播M33模板赛事源码
源码名称：体育直播赛事扁平自适应M33直播模板源码 开发环境：帝国cms7.5 空间支持：phpmysql 带软件采集，可以挂着自动采集发布，无需人工操作！ 演示地址：NBA足球赛事直播源码体育直播M33模板赛事…...