【VUE】ElementPlus之动态主题色调切换(Vue3 + Element Plus+Scss + Pinia)

news2024/12/24 2:22:20

前言

关于ElementPlus的基础主题色自定义可以参阅《【VUE】ElementPlus之自定义主题样式和命名空间》

有了上面基础的了解,我们知道ElementPlus的主题色调是基于CSS3变量特性进行全局控制的,
那么接下来我们也基于CSS3变量来实现主题色调的动态切换效果;

主要控制的色调类型有:primarysuccesswarningdangererrorinfo
针对这六个色调类型分别进行035789级的渐变色定制

以下是默认情况下的主题颜色定义:

ElementPlus默认主题颜色

接下来,我们基于以下环境来实操下:

  • vue: ^3.3.4
  • vite: ^4.4.11
  • sass: ^1.58.3
  • element-plus: ^2.3.4
  • pinia: ^2.1.7

实现

默认主题色下的按钮组件色调:
在这里插入图片描述

预想效果:
在这里插入图片描述

在实现具体交互之前,我们先准备几个辅助小工具

颜色状态管理器

既然是动态切换,那么我们就需要一个容器来记录当下的一些色调信息,便于整体性的调整
以下仅抛个砖,具体业务调整根据自己需要来哈~

import { defineStore } from "pinia";
import ColorUnit from "@/unit/ColorUnit";

export const useColorStore = defineStore("color", () => {
  function setThemeColor(colorMap) {
    let _namespace = "el";
    colorMap.forEach((colorItem) => {
      setPropertyColor(`--${_namespace}-color-${colorItem[0]}`, colorItem[1]);
      themeColorGradient(`--${_namespace}-color-${colorItem[0]}-light-#level#`,"lighten",colorItem[1]);
      setPropertyColor(`--${_namespace}-color-${colorItem[0]}-dark-2`,colorItem[1],"darken");
      // themeColorGradient(`--${_namespace}-color-${colorItem[0]}-dark-#level#`,"darken",colorItem[1]);
    });
  }

  /**
   * 将css3变量设置到document中方便全局调用
   */
  function setPropertyColor(varName, color, funName, level) {
    level = level ? level : 0;
    funName = funName ? funName : "lighten";
    document.documentElement.style.setProperty(
      varName,
      ColorUnit[funName](color, level / 10)
    );
  }

  /**
   * 生成主色的其余渐变色并修改对应CSS3变量值
   */
  function themeColorGradient(varName, funName, themeColor, themeLevel) {
    themeColor = themeColor ? themeColor : '#409eff';
    themeLevel = themeLevel ? themeLevel : [3, 5, 7, 8, 9];

    themeLevel.forEach(function (level) {
      setPropertyColor(
        varName.replace("#level#", level),
        themeColor,
        funName,
        level
      );
    });
  }

  return {
    setThemeColor,
  };
});

颜色编码生成工具

根据前言描述,我们得知,需要根据一个十六进制的色值,生成其余的渐变色值出来,手动配置的话就太麻烦了
所以我们先来封装一个ColorUnit工具来辅助我们进行色调的配置

// file: src/unit/ColorUnit.js
// 代码载取来至:https://gitee.com/lolicode/scui/blob/master/src/utils/color.js
export default {
	//hex颜色转rgb颜色
	HexToRgb(str) {
		str = str.replace("#", "")
		var hxs = str.match(/../g)
		for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16)
		return hxs
	},
	//rgb颜色转hex颜色
	RgbToHex(a, b, c) {
		var hexs = [a.toString(16), b.toString(16), c.toString(16)]
		for (var i = 0; i < 3; i++) {
			if (hexs[i].length == 1) hexs[i] = "0" + hexs[i]
		}
		return "#" + hexs.join("");
	},
	//加深
	darken(color, level) {
		var rgbc = this.HexToRgb(color)
		for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
		return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
	},
	//变淡
	lighten(color, level) {
		var rgbc = this.HexToRgb(color)
		for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
		return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
	}
}

整合

有了上面俩个帮手,现在整合起来的具体应用

template部分

<template>
  <main>
    <el-row style="margin-bottom: 15px">
      <div class="demo-color-warp">
        <div class="demo-color-box" v-for="(item, key) in _theme" :key="key"
             @click="setThemeColor(item.color, item.label)"
             :style="{'--color':item.color[0][1]}">
          <span class="demo-color__label">{{ item.label }}</span>
          <span class="demo-color__value">{{ item.color[0][0] }}</span>
          <span class="demo-color__value">{{ item.color[0][1] }}</span>
          <ul class="demo-color__list">
            <template v-for="(colorItem, colorKey) in item.color" :key="colorKey">
              <li v-if="colorKey>0" :style="{'--color':colorItem[1]}">
<!--                <span>{{ colorItem[0] }}</span>-->
<!--                <span>{{ colorItem[1] }}</span>-->
              </li>
            </template>
          </ul>
        </div>
      </div>
      <span>当前主题:{{ themeName }}</span>
    </el-row>

    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button round>Round</el-button>
      <el-button type="primary" round>Primary</el-button>
      <el-button type="success" round>Success</el-button>
      <el-button type="info" round>Info</el-button>
      <el-button type="warning" round>Warning</el-button>
      <el-button type="danger" round>Danger</el-button>
    </el-row>

    <el-row>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </el-row>
  </main>
</template>

script部分

<script setup>
import {ref} from "vue"
import { useColorStore } from "@/stores/color";
// ...
const themeName = ref('默认主题');
const colorStore = useColorStore();
// ...
let _theme = [
  {label:'默认主题', color:[["primary", "#409EFF"], ["success", "#67C23A"], ["warning", "#E6A23C"], ["danger", "#F56C6C"], ["error", "#F56C6C"], ["info", "#909399"]]},
  {label:'自定义主题1', color:[["primary", "#1984f3"], ["success", "#55DE12"], ["warning", "#EA9412"], ["danger", "#E12020"], ["error", "#E12020"], ["info", "#209399"]]},
  {label:'自定义主题2', color:[["primary", "#0A4680"], ["success", "#276409"], ["warning", "#815410"], ["danger", "#931d1d"], ["error", "#931D1D"], ["info", "#454A55"]]},
];
// ...
function setThemeColor(colorMap, label) {
  themeName.value = label;
  colorStore.setThemeColor(colorMap);
}
// ...
</script>

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

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

相关文章

SpringBoot整合MyBatis-Plus详解(二)

文章目录 SpringBoot整合MyBatis-Plus详解&#xff08;二&#xff09;MyBatis-Plus简介条件构造器和常用接口⭐Wrapper介绍QueryWrapper&#xff08;Mapper接口提供的&#xff09;和QueryChainWrapper&#xff08;Service接口提供的&#xff09;案例1&#xff1a;组装查询条件案…

隐私计算python实现Paillier同态加密

1.基本概念 Paillier同态加密是一种公钥加密方案&#xff0c;具有同态加密的特性。它由Pascal Paillier于1999年提出。 Paillier同态加密基于数论问题&#xff0c;其安全性基于大整数分解问题和离散对数问题的困难性。该方案可以用于保护隐私数据&#xff0c;同时支持在加密状态…

在类库中使用ASP.NET Core API

解决办法1 官方文档 解决办法2 将类库修改为web项目&#xff0c;然后设置输出为类库形式即可 <Project Sdk"Microsoft.NET.Sdk.Web"><PropertyGroup><TargetFramework>netcoreapp3.1</TargetFramework><OutputType>Library</O…

剑指JUC原理-3.线程常用方法及状态

常用方法 start和run 调用run public static void main(String[] args) {Thread t1 new Thread("t1") {Overridepublic void run() {log.debug(Thread.currentThread().getName());FileReader.read(Constants.MP4_FULL_PATH);}};t1.run();log.debug("do othe…

[已解决]安装的明明是pytorch-gpu,但是condalist却显示cpu版本,而且torch.cuda.is_available 也是flase

问题; 安装了gpu版本的pytorch&#xff0c;但是显示的torch.cuda.is_available(&#xff09;却是flase。 conda list查看 版本显示只有cpuonly 在网上找了半天&#xff0c;也没有解决办法。 仔细看了一下&#xff0c;发现&#xff0c;有个单独的包叫cpuonly&#xff0c;不知道…

【工具问题】IDEA每次关闭的时候都会弹框显示closing project,然后弹框持续很久就像卡住了

idea关闭的时候出现问题 问题展示为什么会出现这种情况怎么解决 问题展示 我idea已经关闭了&#xff0c;但是这个弹框要持续很久才能关闭 为什么会出现这种情况 我的plugins原本是加载不出来的&#xff0c;所以我按照网上说法去做 怎么解决 file->setting,再如图选择…

C语言KR圣经笔记 2.4声明 2.5算术操作符 2.6关系和逻辑操作符

2.4 声明 所有变量在使用前必须声明&#xff0c;尽管某些特定的声明可以由上下文隐式地做出。声明指定了类型&#xff0c;并包含一个或多个该类型的变量列表&#xff0c;如 int lower, upper, step; char c, line[1000]; 多个变量能以任何方式分布在多个声明之中&#xff1b…

SpringBoot整合MyBatis-Plus详解(一)

文章目录 SpringBoot整合MyBatis-Plus详解&#xff08;一&#xff09;MyBatis-Plus简介入门案例开发环境准备环境准备创建数据库和表Pom.xml 编写代码application.properties启动类User实体类创建UserMapper接口入门测试案例添加日志功能&#xff08;在application.properties后…

DVWA-Cross Site Request Forgery (CSRF)

大部分网站都会要求用户登录后,使用相应的权限在网页中进行操作,比如发邮件、购物或者转账等都是基于特定用户权限的操作。浏览器会短期或长期地记住用户的登录信息,但是,如果这个登录信息被恶意利用呢?就有可能发生CSRF CSRF的英文全称为Cross Site Request Forgery,中文…

openEuler 22.03 x86架构下docker运行arm等架构的容器——筑梦之路

为什么要这样做&#xff1f; 随着国产化的普及&#xff0c;国家政策对信创产业的支持&#xff0c;尤其一些金融证券行业、政府单位等&#xff0c;逐渐开始走国产化信创的路线&#xff0c;越来越多接触到国产 CPU &#xff08;arm 平台&#xff0c;比如华为的鲲鹏处理器&#xf…

TSINGSEE青犀基于AI视频识别技术的平安校园安防视频监控方案

一、背景需求 因学校频频出治安事件&#xff0c;所以必须要加强学校的安防工作&#xff0c;目前来看&#xff0c;大部分校园都建设了视频监控来预防保障校园安全。但是传统的视频监控系统&#xff0c;主要通过设备来录像以及人员时时监控来进行。这种监管方式效率十分低下&…

elementui时间日期组件右边自定义图标

效果 改为 首先是将左边的清除图标关闭 然后是将右边的图标设置为display&#xff1a;none,设置宽度&#xff0c;左右内边距 最后是 mounted() {/*思路&#xff1a;通过document文档&#xff0c;选中日期时间选择器元素&#xff0c;然后创建一个i标签&#xff0c;并指定其类…

分布式日志和链路追踪

分布式日志 实现思路 分布式日志框架服务的实现思路基本是一致的&#xff0c;如下&#xff1a; 日志收集器&#xff1a;微服务中引入日志客户端&#xff0c;将记录的日志发送到日志服务端的收集器&#xff0c;然后以某种方式存储数据存储&#xff1a;一般使用ElasticSearch分…

简化路径(C++解法)

题目 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身&#xff1…

【高阶数据结构】并查集和图

目录 1.数据结构--并查集 2.数据结构--图 1.图的基础概念 2.图的简单实现 2.1.邻接矩阵的图实现 2.2.邻接表的图实现 2.3.图的DFS和BFS 2.4.最小生成树 2.4.1.Kruskal(克鲁斯卡尔算法) 2.4.2.Prim&#xff08;普里姆算法&#xff09; 2.5.最短路径 2.5.1.Dijkstra(…

非遗主题网站的设计与实现基于PHP实现

包括源码参考论文 下载地址: https://juzhendongli.store/commodity/details/18

k8s-----26、细粒度权限管理 RBAC

0、导读 每一个用户对API资源进行操作都需要通经过以下三个步骤: 第一步:对客户端访问进行认证操作,确认是否具有访问k8s权限(也就是通过serviceaccount) token(共享秘钥) SSL(双向SSL认证) …通过任何一个认证即表示认证通过,进入下一步第二步:授权检查,确认是否对资源…

openpnp - SlotSchultzFeeder source code bugfix

文章目录 openpnp - SlotSchultzFeeder source code bugfix概述笔记openpnp源码调试环境排查思路开git分支查到的问题 - 1查到的问题 - 2查到的问题 - 3针对以上问题进行的逻辑修正D:\my_openpnp\openpnp_github\src\main\java\org\openpnp\machine\reference\driver\wizards\G…

Redis快速上手篇(六)主从复制

主从复制 主机数据更新后根据配置和策略&#xff0c; 自动同步到备机的master/slaver机制&#xff0c;Master以写为主&#xff0c;Slave以读为主 读写分离&#xff0c;性能扩展&#xff08;主 写 从 读&#xff09; 容灾快速恢复 一主二仆 拷贝多个redis.conf文件include(写绝…

动态规划太难了?是你没有找对方法,四题带你搞懂动态规划!

&#x1f4af; 博客内容&#xff1a;动态规划刷题 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准前端&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&#xff1a;这里是CS…