vue3 ts vite 主题色功能

开发工具:vue3 ts vite 

如上图,选择个颜色整个变化,如下图

默认主题为绿色

切换成其它色。

这里面的颜色块,你也可以给个取器色组件,可切换成任意色。切换时主要执行下方的方法,有兴趣可自己研究下。

/**

* 切换主题颜色

*/

const changeThemeColor = (color: string) => {

document.documentElement.style.setProperty("--el-color-primary", color);

document.documentElement.style.setProperty("--el-color-primary-dark-2", `${getDarkColor(color, 0.1)}`);

for (let i = 1; i <= 9; i++) {

document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(color, i / 10)}`);

}

}

1 创建hooks

// 文件:src/hooks/useTheme.ts
// import { useTheme } from "@/hooks/useTheme"; //引入主题勾子
// const { changeThemeColor } = useTheme(); // 解构功能import { ElMessage } from 'element-plus'/*** 颜色转换函数* @method hexToRgb hex 颜色转 rgb 颜色* @method rgbToHex rgb 颜色转 Hex 颜色* @method getDarkColor 加深颜色值* @method getLightColor 变浅颜色值*/
export function useTheme() {// str 颜色值字符串const hexToRgb = (str: string): any => {let hexs: any = ''let reg = /^\#?[0-9A-Fa-f]{6}$/if (!reg.test(str)) {ElMessage.warning('输入错误的hex')return ''}str = str.replace('#', '')hexs = str.match(/../g)for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16)return hexs}// r 代表红色 | g 代表绿色 | b 代表蓝色const rgbToHex = (r: any, g: any, b: any): string => {let reg = /^\d{1,3}$/if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {ElMessage.warning('输入错误的rgb颜色值')return ''}let hexs = [r.toString(16), g.toString(16), b.toString(16)]for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`return `#${hexs.join('')}`}// color 颜色值字符串 | level 变浅的程度,限0-1之间const getDarkColor = (color: string, level: number): string => {let reg = /^\#?[0-9A-Fa-f]{6}$/if (!reg.test(color)) {ElMessage.warning('输入错误的hex颜色值')return ''}let rgb = useTheme().hexToRgb(color)for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))return useTheme().rgbToHex(rgb[0], rgb[1], rgb[2])}// color 颜色值字符串 | level 加深的程度,限0-1之间const getLightColor = (color: string, level: number): string => {let reg = /^\#?[0-9A-Fa-f]{6}$/if (!reg.test(color)) {ElMessage.warning('输入错误的hex颜色值')return ''}let rgb = useTheme().hexToRgb(color)for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])return useTheme().rgbToHex(rgb[0], rgb[1], rgb[2])}/*** 切换主题颜色*/const changeThemeColor =(color: string)=> {document.documentElement.style.setProperty("--el-color-primary", color);document.documentElement.style.setProperty("--el-color-primary-dark-2", `${getDarkColor(color, 0.1)}`);for (let i = 1; i <= 9; i++) {document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(color, i / 10)}`);}
}return {hexToRgb,rgbToHex,getDarkColor,getLightColor,changeThemeColor}
}

2 创建抽屉组件,我的项目中是用到‘el-drawer’,实际上可根据自己的情况走。

<!-- 位置 子组件:components/layout/ComSetting.vue -->
<template><el-drawer class="drawer-setting" v-model="dialogVisible" :show-close="true" @closed="handleClosed"><template #header><h4 class="title">设置</h4></template><template #default><div class="body"><div class="b-box"><div class="title">主题更改颜色</div><div class="fun"><div class="colors"><div class="item" v-for="(item, index) in colors" :key="index" :style="{ background: item }" @click="changeThemeColor(item)">{{ item }}</div></div></div></div></div></template></el-drawer>
</template><script setup lang="ts">
import { ref, reactive, defineProps, defineEmits } from "vue";import { useTheme } from "@/hooks/useTheme"; //主题更改
const { changeThemeColor } = useTheme();let emits = defineEmits(["update:opened"]);
let props = defineProps({opened: {type: Boolean,default: false,},
});let colors: any = reactive(["#36CEBF", "#f5222d", "#fa541c", "#722ed1"]);//对话框开关
let dialogVisible: any = computed({get() {return props.opened;},set(val) {emits("update:opened", val);},
});let settingOpened = ref(true);//设置
function handleSetting() {settingOpened.value = !settingOpened.value;
}//关闭事件
function handleClosed() {//emits("update:opened", false);
}
</script><style lang="scss" scoped>
//@import '引入的css文件';
.drawer-setting {.title {font-size: 14px;}.body {.b-box {min-height: 50px;.title {height: 40px;line-height: 40px;color: #000;}.colors {display: flex;justify-content: start;.item {width: 20px;height: 20px;display: inline-block;border-radius: 4px;margin-right: 16px;cursor: pointer;}}}}
}
</style>

3 引用该组件,并运行即可。 

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

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

相关文章

torch - 张量Tensor简介与创建

张量是什么&#xff1f; 张量就是多维数组&#xff0c;0维张量叫标量&#xff0c;1维张量是向量&#xff0c;2维张量是矩阵&#xff0c;灰度图片大多都使用2维张量所表示的&#xff0c;3维张量一般用于RGB图片的表示。 张量的属性 其中后四个是用于Tensor自动求导。前四个和T…

C语言--写一个函数返回bool值,来判断给定的字符串A和B(假设都是小写字母),是否是B中的字符都存在于A中,如果是返回true,否则返回false

一.题目描述 写一个函数返回bool值&#xff0c;来判断给定的字符串A和B&#xff08;假设都是小写字母&#xff09;&#xff0c;是否是B中的字符都存在于A中&#xff0c;如果是返回true&#xff0c;否则返回false。例如&#xff1a; 字符串A&#xff1a;abcde 字符串B&#xff…

C++ string类(一)

1.C语言中的字符串 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符 OOP(Object Oriented Programming)的思想&#xff0c;而且…

现货黄金休市时间长不长?科普一下交易时间

先告诉你答案&#xff0c;现货黄金市场每天的交易时间很长&#xff0c;因为它全天的盘面是由亚洲、欧洲和北美时间无缝地连接而成&#xff0c;无论投资者身处何方&#xff0c;通过哪里的平台入市&#xff0c;每天基本上都可以享受到连续20多个小时的行情。 只要投资者有足够的精…

Gooxi国鑫金秋发布会圆满召开,引领数智新未来

10月24日&#xff0c;主题为“芯加速创鑫局”的2023 Gooxi第四代英特尔至强可扩展处理器平台新品发布会隆重召开&#xff0c;Gooxi重磅发布基于第四代英特尔至强可扩展处理器平台系列新品&#xff0c;Gooxi英特尔平台算力迎来全新升级进化&#xff0c;为AI注入全新发展动力&…

Qt HTTP 摘要认证(海康球机摄像机ISAPI开发)

接到一个需求是开发下海康的球机,控制云台,给到我的是一个开发手册,当然了是海康的私有协议 ISAPI开发手册https://download.csdn.net/download/qq_37059136/88547425关于开发这块读文档就可以理解了,海康使用的是摘要认证,当然了海康已经给出使用范例 通过libcurl就可以直接连…

Mars3d-vue最简项目模板集成使用Mars3d的UI控件样板

备注说明&#xff1a; 1.小白可看步骤一二&#xff0c;进阶小白可直接看步骤三 步骤一&#xff1a;新建文件夹<uitest>&#xff0c;在mars3d仓库拉一份最简项目模板&#xff1a; git clone mars3d-vue-template: Vue3.x 技术栈下的Mars3D项目模板 步骤二&#xff1a;运…

云网络流量分析工具的关键优势有哪些?

在当今数字化的时代&#xff0c;企业依赖云计算和网络服务以实现高效运营。随着云网络的复杂性不断增加&#xff0c;对网络流量的分析变得至关重要。云网络流量分析工具应运而生&#xff0c;为管理员提供了深入洞察、实时监控的能力。本文将探讨此工具的关键优势以及它们在现代…

如何利用大模型蒸馏出小模型实现降本

如何让小模型的推理效果在某些领域比 ChatGPT 这样的大模型还要更强&#xff1f;这篇论文提供了一个思路&#xff1a;https://arxiv.org/abs/2212.10071&#xff0c;借助思维链&#xff08;CoT&#xff09;逐步解决复杂推理任务的能力&#xff0c;可以使用大模型作为推理教师&a…

JDK 9 Map.of()

//Java 9 Map.of //private static final int SIZE 10;

搞定这套Python爬虫面试题,大厂Offer拿到手软

文章目录 1、简述Python 的特点和优点2、Python 有哪些数据类型&#xff1f;3、列表和元组的区别4、Python 是如何运行的5、Python 运行速度慢的原因6、面对 Python 慢的问题&#xff0c;有什么解决办法7、描述一下全局解释器锁 GIL8、深拷贝 浅拷贝9、is 和 的区别10、文件读…

黔院长 | 何为风邪?

中医上所说的风&#xff0c;也称风邪&#xff0c;是指受到外界侵犯&#xff08;外邪&#xff09;而感得风寒、风热、风湿等症状&#xff0c;导致人的免疫力下降。寒、湿、燥、暑、热等都属于外邪&#xff0c;多依附于风而入侵人体&#xff0c;因此风邪更多的是指一种致病因素。…