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

前言

关于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.mzph.cn/news/119889.shtml

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

相关文章

第一单元——概述

Blazor 的由来 Blazor 这个名字是两个单词改进而来的,即 Browser + Razor。从名字不难看出,它是基于 Razor 语法的浏览器框架。 Razor 语法的对于一直从事 ASP.NET 开发的小伙伴来说并不陌生,它从 .NET Framework 的 MVC 时代就开始伴随着我们一直前行,并且一直沿用到至今…

【原创】修复vCenter的Web界面无法启动的问题

零 出现的问题 在使用过程中&#xff0c;发现vCenter无法登录&#xff0c;报错。 因此重新启动vCenter&#xff0c;打开Web&#xff0c;先是报“no healthy upstream”&#xff0c;等了二十分钟后错误依旧。 再次重启vCenter&#xff0c;打开Web&#xff0c;还是报同样的错误。…

Linux - firewall-cmd 命令添加端口规则不生效排查

文章目录 linux 防火墙 firewall-cmd 命令详解问题排查 linux 防火墙 firewall-cmd 命令详解 基本语法 firewall-cmd --zonezone-name --add-serviceservice-name --permanent命令参数 --zone&#xff1a;指定要添加服务的区域名称。 --add-service&#xff1a;指定要添加的…

Apache ActiveMQ RCE漏洞复现(CNVD-2023-69477)

0x01 产品简介 ActiveMQ是一个开源的消息代理和集成模式服务器&#xff0c;它支持Java消息服务(JMS) API。它是Apache Software Foundation下的一个项目&#xff0c;用于实现消息中间件&#xff0c;帮助不同的应用程序或系统之间进行通信。 0x02 漏洞概述 Apache ActiveMQ 中存…

【概率论教程01】对贝叶斯定理的追忆

一、说明 贝叶斯定理&#xff0c;是一个需要反复体悟的道理&#xff0c;不是说公式解释清除就算Grasp&#xff0c;而是需要反复在实际项目中发挥&#xff0c;才能算掌握了。而实际应用中&#xff0c;并不是简单给出条件就可以套用&#xff0c;而是隐藏在迷雾一样的事实中&#…

基于Springboot自习预约管理系统

功能介绍&#xff1a; 基于Springboot自习预约管理系统。该系统为后台管理系统&#xff0c;无前台。主要角色有&#xff1a;管理员和学生。 主要功能&#xff1a; 学生信息管理&#xff1a;学号、姓名、专业、班级、年级、联系方式 教室信息管理&#xff1a;教室、教室号、楼…

利用Linux socat快速搭建TCP服务器

某些场合&#xff0c;需要在Linux上快速搭建一个TCP的服务器&#xff0c;接收客户端的连接&#xff0c;返回一些数据。 一般用于测试或者负载不大&#xff0c;安全性要求不高的场合&#xff0c;达到快速搭建的目的。 本文以客户端通过服务器的3334端口&#xff0c;获取服务器…

BIOS MBR UEFI GPT详解

先来看下名词 启动方式&#xff1a; Legacy&#xff1a;传统的。指的就是BIOS。 BIOS&#xff1a;Basic Input Output System&#xff0c;中文名称"基本输入输出系统"。 UEFI&#xff1a;Unified Extensible Firmware Interface&#xff0c;中文名称"统一的…

在 .NET 8 Release Candidate 2 中宣布 .NET MAUI:更高质量

作者&#xff1a;David Ortinau 排版&#xff1a;Alan Wang 随着 .NET 8 候选版本 2&#xff08;RC2&#xff09;中 .NET MAUI 的发布&#xff0c;我们距离 .NET 8 通用版&#xff08;GA&#xff09;又近了一步。与 RC1 一样&#xff0c;此版本包含上线许可证&#xff0c;因此您…

常见面试题-MySQL专栏(一)

为什么 mysql 删了行记录&#xff0c;反而磁盘空间没有减少&#xff1f; 答&#xff1a; 在 mysql 中&#xff0c;当使用 delete 删除数据时&#xff0c;mysql 会将删除的数据标记为已删除&#xff0c;但是并不去磁盘上真正进行删除&#xff0c;而是在需要使用这片存储空间时&…

Linux命令(105)之readlink

linux命令之readlink 1.readlink介绍 linux命令readlink是用来查看软链接的源文件在哪 2.readlink用法 readlink [参数] filename readlink参数 参数说明-f递归给出文件名的所有符号链接以标准-e递归给出文件名的所有符号链接以标准化-n不输出尾随的新行-s缩减大多数的错误…

0031【Edabit ★☆☆☆☆☆】【使用箭头函数】Using Arrow Functions

0031【Edabit ★☆☆☆☆☆】【使用箭头函数】Using Arrow Functions data_structures language_fundamentals Instructions Create a function that returns the given argument, but by using an arrow function. An arrow function is constructed like so: arrowFunc(/*p…

【哈士奇赠书活动 - 44期】- 〖从零基础到精通Flutter开发〗

文章目录 ⭐️ 赠书 - 《从零基础到精通Flutter开发》⭐️ 内容简介⭐️ 作者简介⭐️ 编辑推荐⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书 - 《从零基础到精通Flutter开发》 ⭐️ 内容简介 本书由浅入深地带领读者进入Flutter开发的世界&#xff0c;从Flutter的起源讲起&#xff0c…

【RV1106/RV1103】RV1103增加RTL8723BS

文章目录 Kernel 部分支持配置 menuconfigWiFi 功能支持Bluetooth 功能支持 原SDK的Busybox配置BT 部分文件系统部分蓝牙测试dbus 安装测试遇到的问题让hci0出来 使用hcitool来操作 Kernel 部分支持 配置 menuconfig WiFi 功能支持 Bluetooth 功能支持 正基和海华的模块都使用…

JAVA加密解密工具

JAVA加密解密工具 import lombok.extern.slf4j.Slf4j; import org.jasypt.encryption.pbe.PooledPBEStringEncryptor; import org.jasypt.encryption.pbe.config.SimpleStringPBEConfig;/*** author 孙永潮* date 2022/10/26*/ Slf4j public class JasyptUtil {/*** Jasypt生成…

Hafnium安全分区管理器和示例参考软件栈

安全之安全(security)博客目录导读 目录 一、安全分区管理器 1、术语 2、对旧平台的支持 二、示例参考软件栈 一、安全分区管理器 安全分区管理器的三种实现在TF-A代码库并存&#xff1a; 1.基于FF-A规范的S-EL2 SPMC&#xff08;SPM Core&#xff09;&#xff0c;使能安全…

搜维尔科技:Geomagic Touch X力反馈设备【开箱图真机测试】

将力反馈性能提升到一个新的水平&#xff0c;可提供更精确的定位输入和高保真力反馈输出。对于3D建模和设计、手术培训、虚拟装配等要求精确度较高的多种操作&#xff0c;TouchX是一个易于使用、经济实惠的选择。 Touch X 的功能 屡获殊荣的 Touch X 力反馈设备提供了经济实惠…

【OpenCV实现平滑图像处理】

文章目录 概要2D 卷积&#xff08;图像过滤&#xff09;模糊图像&#xff08;平滑图像&#xff09;中值模糊双边过滤小结 概要 在图像处理中&#xff0c;低通滤波器是一种常用的技术&#xff0c;用于平滑、模糊或降低图像的噪音。这种滤波器通过去除图像中高频部分&#xff08…

Unity之ShaderGraph如何实现冰冻效果

前言 今天我们来实现一个冰冻的效果,非常的炫酷哦。 如下图所示: 主要节点 Voronoi:根据输入UV生成 Voronoi 或Worley噪声。Voronoi 噪声是通过计算像素和点阵之间的距离生成的。通过由输入角度偏移控制的伪随机数偏移这些点,可以生成细胞簇。这些单元的规模以及产生的…

垃圾回收系统小程序

在当今社会&#xff0c;废品回收不仅有利于环境保护&#xff0c;也有利于资源的再利用。随着互联网技术的发展&#xff0c;个人废品回收也可以通过小程序来实现。本文将介绍如何使用乔拓云网制作个人废品回收小程序。 1. 找一个合适的第三方制作平台/工具&#xff0c;比如乔拓云…