后台系统更改主题【el-color-picker】

Element el-color-picker 颜色选择器的使用

设置的页面

<script setup lang="ts">
import { getThemeColor } from "../../utils/colorChange";
import { useUserStore } from "@/store/index";
import { reactive } from "vue";
import { ref } from "vue";
const userStore = useUserStore();

const drawer = ref(false);
const handleClose = () => {
  drawer.value = false;
  colorCdt.color = "";
};
const openDrawer = (bool: boolean) => {
  drawer.value = bool;
};
const colorCdt = reactive({
  predefineColors: [
    "#ff4500",
    "#ff8c00",
    "#ffd700",
    "#90ee90",
    "#00ced1",
    "#1e90ff",
    "#c71585",
    "rgba(255, 69, 0, 0.68)",
    "rgb(255, 120, 0)",
    "hsv(51, 100, 98)",
    "hsva(120, 40, 94, 0.5)",
    "hsl(181, 100%, 37%)",
    "hsla(209, 100%, 56%, 0.73)",
    "#c7158577",
  ],
  color: "",
  isShowWaterMark: true,
});

const changeTheme = (val: any) => {
  console.log(val, "val");

  document.documentElement.style.setProperty("--theme_bgColor", val); // 设置变量值
  sessionStorage.setItem("theme_bgColor", val); // 缓存存一份
  userStore.theme_bgColor = getThemeColor(); // vuex更新一下
};
defineExpose({ openDrawer });
</script>
<template>
  <el-drawer
    v-model="drawer"
    title="设置"
    :before-close="handleClose"
    size="20%"
  >
    <div class="DrawItem">
      <span>主题更改:</span>
      <el-color-picker
        @change="changeTheme"
        v-model="colorCdt.color"
        show-alpha
        :predefine="colorCdt.predefineColors"
      >
      </el-color-picker>
    </div>
  </el-drawer>
</template>

<style lang="scss" >
.DrawItem {
  box-sizing: border-box;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
}
</style>

在这里插入图片描述
在store里面保存一个颜色变量值

在这里插入图片描述

获取主题颜色的方法写在colorChange.ts

// 获取主题颜色
export function getThemeColor() {
  // 有缓存用缓存,没缓存用默认
  let cache_theme_bgColor = sessionStorage.getItem("theme_bgColor");
  if (cache_theme_bgColor) {
    document.documentElement.style.setProperty(
      "--theme_bgColor",
      cache_theme_bgColor
    );
    return cache_theme_bgColor;
  } else {
    let theme_bgColor = getComputedStyle(
      document.documentElement
    ).getPropertyValue("--theme_bgColor");
    return theme_bgColor;
  }
}

:root定义全局样式和变量
定义 :root 后,所有变量都将被保存在 :root 中,并且可以在整个页面的任何位置使用。这使得我们可以轻松地为网站设置一些通用的变量,如颜色、字体、间距等等

reset.css【在main.ts里全局引入】

:root {
  --theme_bgColor: #fff;
}

在layout获取颜色的变量值【以防一刷新颜色值丢失】
如果需要让页面背景变可以再layout 获取一次颜色值
如果需要侧边栏背景色也变,可以sidebar获取颜色变量值
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java之“数字困境”:资产管理项目中的Bug追踪与启示

目录 1 前言2 问题的发现3 调试的开始4 深入调试5 调试心得与反思6 结语 1 前言 在程序员的日常工作中&#xff0c;我们时常面对各种令人头疼的问题&#xff0c;其中最令人崩溃的瞬间之一&#xff0c;就是当我们花费大量时间追踪一个看似复杂的bug&#xff0c;最终发现问题的根…

Node-RED系列教程-28修改UI默认背景图片

主要使用到如下节点: 实现过程如下: 步骤1:编写背景图片请求服务. http in节点配置: 读文件节点配置: http out节点配置: 到此,背景图片请求服务搭建完成。

vue中cli组件如何自定义定义

目录 创建自定义组件 注册并使用自定义组件 注册组件&#xff1a; 在需要使用该组件的页面或父组件中注册并引入自定义组件。 使用 Props 传递数据 总结步骤&#xff1a; 前言 在Vue CLI中使用自定义组件是构建交互式和模块化Web应用的重要一环。Vue CLI为开发者提供了使用…

[sd_scripts]之gen_img

https://github.com/kohya-ss/sd-scripts/blob/main/docs/gen_img_README-ja.mdhttps://github.com/kohya-ss/sd-scripts/blob/main/docs/gen_img_README-ja.md1.图像生成 ckpt "/home/image_team/image_team_docker_home/lgd/e_commerce_sd/stable-diffusion-webui/mod…

轻量封装WebGPU渲染系统示例<23>- 可渲染对象添加到多个渲染Pass节点(源码)

渲染和计算混合系统&#xff0c; 可以看做基于算力驱动设计理念的一种实现。 此系统中&#xff0c;可渲染(rendering)/计算(computing)实体可以任意添加到一个渲染器pass节点。若干个这样的节点相关联&#xff0c;就能构成对应的pass node graph&#xff0c;也就实现了整个3D渲…

LDC1000配Pico - 通过不同金属导电性自制金属分类(其实线圈很重要)

话不多说&#xff0c;上接线和代码&#xff0c;用的arduino IDE。 LDC1000 - PicoW5V ------- VSYS GND ------ GND ECK默认不接&#xff0c;板载8M有源晶振时基时钟,如需使用其他外部时钟&#xff0c;请去掉R3&#xff1b; INTB默认不接&#xff1b; SCK ------ GP2 CSB ----…

选择护眼台灯的标准?儿童护眼台灯挑选指南

自从护眼台灯成为学生书桌上最常见的照明灯具后&#xff0c;就经常能看到关于护眼台灯伤眼的信息。从根源上说&#xff0c;是各种不专业产品混杂在市场中&#xff0c;这种产品技术较差&#xff0c;而且为减少成本选择品质差的材料&#xff0c;但由于低廉的价格仍然吸引了众多消…

YOLO V1中关于bounding boxs的部分要点

YOLO的核心原理预览 YOLO将输入的图片resize成448 x 448&#xff0c;并且为 S x S&#xff08;S 7&#xff09;个grid&#xff0c;如果物体的中心落入该grid中&#xff0c;那么该grid就需要负责检测该物体。一次性输出所检测到的目标信息&#xff0c;包括类别和位置。 对于每一…

【4】Gradle-快速入门使用【Gradle多模块项目详解】

目录 【4】Gradle-快速入门使用【Gradle多模块项目详解】创建多项目构建添加子项目命名建议 项目依赖项项目路径不同模块的build.gradle配置 子项目之间共享构建逻辑公约插件跨项目配置buildSrc开发公约插件 调整多模块项目配置修改项目树的元素 了解Gralde配置时间和执行时间并…

SparkSQL之Catelog体系

按照SQL标准的解释&#xff0c;在SQL环境下Catalog和Schema都属于抽象概念。在关系数据库中&#xff0c;Catalog是一个宽泛的概念&#xff0c;通常可以理解为一个容器或数据库对象命名空间中的一个层次&#xff0c;主要用来解决命名冲突等问题。 在Spark SQL系统中&#xff0c;…

从管易云到金蝶云星空通过接口配置打通数据

从管易云到金蝶云星空通过接口配置打通数据 接通系统&#xff1a;管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌&#xff0c;先后开发了C-ERP、EC-OMS、EC-WMS、E店管家、BBC、B2B、B2C商城网站建设等产品和服务&#xff0c;涵盖电商业务全流程。 接通系统&…

创建maven的 java web项目

创建maven的 java web项目 创建出来的项目样子 再添加java和resources文件夹 一定要如图有文件夹下有图标才代表被IDEA识别&#xff0c;不让是不行的 没有的话在File——ProjectStructure中进行设置

SM8081是一个高效率的1.5MHz同步步进降压DC/DC调节器,可提供高达1A的电压输出电流。

SM8081 高效率&#xff0c;1.5MHZ&#xff0c;1A 同步降压调节器 概述&#xff1a; SM8081是一个高效率的1.5MHz同步步进降压DC/DC调节器&#xff0c;可提供高达1A的电压输出电流。它可以在宽输入电压下工作范围从2.5V到5.5V&#xff0c;集成主开关以及具有非常低Rps&#x…

GPT Store上线 OpenAI 的「iPhone时刻」这回真来了

OpenAI首届全球开发者大会上&#xff0c;Sam Altman再次给AI行业扔了一系列重磅炸弹。GPT-4 Turbo、GPT Store和定制化的GPT在大会上发布&#xff0c;OpenAI的生态体系初具雏形。 GPT模型刚升级了不到24小时&#xff0c;高能网友就开始用它的定制化功能创造了各种有趣的应用。…

kafka实践-热点数据展示

1 实时流式计算 1.1 概念 流式计算一般对实时性要求较高&#xff0c;同时一般是先定义目标计算&#xff0c;然后数据到来之后将计算逻辑应用于数据。同时为了提高计算效率&#xff0c;往往尽可能采用增量计算代替全量计算。也就是将数据先聚集在集中全量处理。 2.2 应用场景…

【网络】TCP协议理论

TCP协议理论 一、TCP协议简介1、浅谈可靠性2、UDP协议存在的意义 二、TCP的协议格式TCP的解包和分用 三、确认应答机制一种应答方式——捎带应答 四、超时重传机制超时等待时间 五、流量控制1、TCP的缓冲区2、TCP的窗口大小3、TCP的PSH标志位 六、TCP的六个标志位URG字段的详细…

操作系统概念

一、是什么 操作系统&#xff08;Operating System&#xff0c;缩写&#xff1a;OS&#xff09;是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序&#xff0c;同时也是计算机系统的内核与基石 简单来讲&#xff0…

C语言之认识柔性数组(flexible array)

在学习之前&#xff0c;我们首先要了解柔性数组是放在结构体当中的&#xff0c;知道这一点&#xff0c;我们就开始今天的学习吧&#xff01; 1.柔性数组的声明 在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 这里的结构是结构…

Producer

Producer开发样例 版本说明 新客 户端, 从Kafka 0.9.x 开始, client基于Java语言实现。同时提供C/C, Python等其他客户端实现。 开发步骤 配置客户端参数以及创建客户端实例;构建待发送消息;发送消息;关闭生产者实例; 代码示例 public class KafkaProducer {public stati…

C++标准模板(STL)- 类型支持 (受支持操作,检查类型是否有拥有移动赋值运算符)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…