vue2 切换主题色以及单页面好使方法

news2025/5/18 10:23:35

今天要新增一个页面要根据不同公司切换不同页面主题色，一点一点来，怎么快速更改 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>

完美解决

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2378435.html

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

相关文章

JavaScript【6】事件

JavaScript【6】事件

1.概述&#xff1a; 在 JavaScript 中&#xff0c;事件&#xff08;Event&#xff09;是浏览器或 DOM&#xff08;文档对象模型&#xff09;与 JavaScript 代码之间交互的一种机制。它代表了在浏览器环境中发生的特定行为或者动作&#xff0c;比如用户点击鼠标、敲击键盘、页面…
阅读更多...
STM32F10xx 参考手册

STM32F10xx 参考手册

6. 什么是寄存器 本章参考资料&#xff1a;《STM32F10xx 参考手册》、《STM32F10xx数据手册》、 学习本章时&#xff0c;配合《STM32F10xx 参考手册》“存储器和总线架构”及“通用I/O(GPIO)”章节一起阅读&#xff0c;效果会更佳&#xff0c;特别是涉及到寄存器说明的部分。…
阅读更多...
TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性

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 发布订阅模式深度解析：原理、应用与实践

在现代分布式系统架构中&#xff0c;实时消息传递机制扮演着至关重要的角色。Redis 作为一款高性能的内存数据库&#xff0c;其内置的发布订阅(Pub/Sub)功能提供了一种轻量级、高效的消息通信方案。本文将全面剖析 Redis 发布订阅模式&#xff0c;从其基本概念、工作原理到实际…
阅读更多...
飞帆控件 post or get it when it has get

飞帆控件 post or get it when it has get

我在这里分享两个链接&#xff1a; post_get_it 设计 - 飞帆 有人看出来这个控件是干什么用吗&#xff1f; 控件的配置&#xff1a;
阅读更多...
SQL里where条件的顺序影响索引使用吗？

SQL里where条件的顺序影响索引使用吗？

大家好&#xff0c;我是锋哥。今天分享关于【SQL里where条件的顺序影响索引使用吗&#xff1f;】面试题。希望对大家有帮助&#xff1b; SQL里where条件的顺序影响索引使用吗&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 SQL 查询中&#xff0c;W…
阅读更多...
SAP学习笔记 - 开发豆知识02 - com.sap.cds.services.cds.CdsService 废止，那么用什么代替呢？

SAP学习笔记 - 开发豆知识02 - com.sap.cds.services.cds.CdsService 废止，那么用什么代替呢？

我看很多人代码里面用的都是这个CdsService类&#xff0c;可以自从2.0版本往上这个类就没了啊。 它的代替是什么呢&#xff1f;用的CqnService 那么怎么查的呢&#xff1f; 我也是下载好几个包&#xff0c;解压看&#xff0c;然后发现这里还可以直接看&#xff0c;挺方便的。…
阅读更多...
OpenResty 深度解析：构建高性能 Web 服务的终极方案

OpenResty 深度解析：构建高性能 Web 服务的终极方案

引言 openresty是什么&#xff1f;在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列 我们分别从初始化阶段&#xff0c;重写/访问阶段&#xff0c;内容阶段&#xff0c;日志…
阅读更多...
什么是路由器环回接口？

什么是路由器环回接口？

路由器环回接口&#xff08;LoopbackInterface&#xff09;是网络设备中的一种逻辑虚拟接口&#xff0c;不依赖物理硬件&#xff0c;但在网络配置和管理中具有重要作用。以下是其核心要点&#xff1a; 一、基本特性 1.虚拟性与稳定性 环回接口是纯软件实现的逻辑接口&#x…
阅读更多...
【MySQL进阶】如何在ubuntu下安装MySQL数据库

【MySQL进阶】如何在ubuntu下安装MySQL数据库

前言 &#x1f31f;&#x1f31f;本期讲解关于如何在ubuntu环境下安装mysql的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f3…
阅读更多...
【数据结构】_二叉树

【数据结构】_二叉树

1.二叉树链式结构的实现 1.1 前置说明 在学习二叉树的基本操作前&#xff0c;需先要创建一棵二叉树&#xff0c;然后才能学习其相关的基本操作。由于现在大家对二叉树结构掌握还不够深入&#xff0c;为了降低大家学习成本&#xff0c;此处手动快速创建一棵简单的二叉树&#x…
阅读更多...
给图表组件上点“颜色” —— 我与 CodeBuddy 的合作记录

给图表组件上点“颜色” —— 我与 CodeBuddy 的合作记录

我正在参加CodeBuddy「首席试玩官」内容创作大赛&#xff0c;本文所使用的 CodeBuddy 免费下载链接&#xff1a;腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 前段时间&#xff0c;我在开发一个 Vue3 项目的时候&#xff0c;碰到了一个小小的挑战&#xff1a;我想做一个可…
阅读更多...
使用 YOLO 结合 PiscTrace 实现股票走势图像识别

使用 YOLO 结合 PiscTrace 实现股票走势图像识别

在智能投研和金融分析中&#xff0c;自动识别图表中的模式&#xff08;如 K 线走势、支撑/阻力位、形态结构&#xff09;成为一种新兴手段。传统的技术分析依赖大量人工判断&#xff0c;而计算机视觉技术的发展&#xff0c;特别是 YOLO 模型在图像识别领域的高效表现&#xff0…
阅读更多...
OpenCV中的光流估计方法详解

OpenCV中的光流估计方法详解

文章目录 一、引言二、核心算法原理1. 光流法基本概念2. 算法实现步骤 三、代码实现详解1. 初始化设置2. 特征点检测3. 光流计算与轨迹绘制 四、实际应用效果五、优化方向六、结语 一、引言 在计算机视觉领域&#xff0c;运动目标跟踪是一个重要的研究方向&#xff0c;广泛应用…
阅读更多...
NBA足球赛事直播源码体育直播M33模板赛事源码

NBA足球赛事直播源码体育直播M33模板赛事源码

源码名称&#xff1a;体育直播赛事扁平自适应M33直播模板源码 开发环境&#xff1a;帝国cms7.5 空间支持&#xff1a;phpmysql 带软件采集&#xff0c;可以挂着自动采集发布&#xff0c;无需人工操作&#xff01; 演示地址&#xff1a;NBA足球赛事直播源码体育直播M33模板赛事…
阅读更多...
电子电器架构 --- 整车造车阶段四个重要节点

电子电器架构 --- 整车造车阶段四个重要节点

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。 生活中有两种人，一种人格外在意别人的眼光;另一种人无论…
阅读更多...
黑马点评-用户登录

黑马点评-用户登录

文章目录 用户登录发送短信验证码注册/登录校验登录 用户登录 发送短信验证码 public Result sendCode(String phone, HttpSession session) {// 1.校验手机号if (RegexUtils.isPhoneInvalid(phone)) {// 2.如果不符合&#xff0c;返回错误信息return Result.fail("手机…
阅读更多...
十二、Hive 函数

十二、Hive 函数

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月1日 专栏&#xff1a;Hive教程 在数据处理的广阔天地中&#xff0c;我们常常需要对数据进行转换、计算、清洗或提取特定信息。Hive 提供了强大的内置运算符和丰富的内置函数库&#xff0c;它们就像魔法师手中的魔法棒&…
阅读更多...
No More Adam: 新型优化器SGD_SaI

No More Adam: 新型优化器SGD_SaI

一.核心思想和创新点 2024年12月提出的SGD-SaI算法&#xff08;Stochastic Gradient Descent with Scaling at Initialization&#xff09;本质上是一种在训练初始阶段对不同参数块&#xff08;parameter block&#xff09;基于**梯度信噪比&#xff08;g-SNR, Gradient Signa…
阅读更多...
JSP链接MySQL8.0（Eclipse+Tomcat9.0+MySQL8.0）

JSP链接MySQL8.0（Eclipse+Tomcat9.0+MySQL8.0）

所用环境 Eclipse Tomcat9.0 MySQL8.0.21(下载&#xff1a;MySQL Community Server 8.0.21 官方镜像源下载 | Renwole&#xff09; mysql-connector-java-8.0.21&#xff08;下载&#xff1a;MySQL :: Begin Your Download&#xff09; .NET Framework 4.5.2&#xff08;下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023