vue3+less使用主题定制(多主题定制)可切换主题

假如要使用两套主题:蓝色、红色

例如:

首先确保自己的vue3项目有less,这边不多做接入解释

1、在src目录下建一个styles文件夹,在syles文件夹下面新建两个less文件:theme.less和variables.less;

theme.less的样式代码(默认的主题色):

@import './variables.less';:root {--primary-color: #e83d23; // 默认主题颜色
}

variables.less的样式代码(供切换的主题,可以制作多种,我这边只做两种):

.red-theme {--primary-color: #e83d23;
}.blue-theme {--primary-color: #4c7bec;
}

2、使用vuex来管理,这边vuex怎么接入就不过多叙述,请先接入vuex;然后直接粘贴我里面的全部代码

store下面的index代码:

import { createStore } from 'vuex'// 持久化的插件
import createPersistedState from "vuex-persistedstate"const state = {// 当前的主题currentTheme: 'red-theme',
}
const getters = {
}
const mutations = {// 切换主题的方法switchTheme(state, theme) {state.currentTheme = theme;},
}
const actions = {// 异步切换主题switchTheme({ commit }, theme) {commit('switchTheme', theme);},
}const modules = {}export default createStore({state,mutations,actions,getters,modules,plugins: [createPersistedState()],
})

3、在App.vue里面的顶层div使用我当前的样式class,这边直接粘贴代码:

App.vue:

<template><div :class="currentTheme"><router-view v-slot="{ Component }"><keep-alive><component :is="Component" v-if="$route.meta.keepAlive" /></keep-alive><component :is="Component" v-if="!$route.meta.keepAlive" /></router-view></div>
</template><script lang="ts">import { defineComponent } from 'vue'import { mapState } from 'vuex'export default defineComponent({name: 'App',components: {},computed: {...mapState(['currentTheme']),}})
</script>

主要代码是最外层div上面绑定的class,下面的router-view你们项目是怎样的就是怎样的,不用和我的一样,然后再是下面的计算属性,引入vuex里面的主题变量

4、在页面代码里面使用切换功能,就可以切换了,例如:

index.vue:

<template><div><button @click="switchTheme('red-theme')">点击切换为红色</button><button @click="switchTheme('blue-theme')">点击切换为蓝色</button><div class="test">测试切换主题</div></div>
</template><script setup>import { ref } from 'vue';import { useStore } from 'vuex'const store = useStore()const currentTheme = ref('red-theme');const switchTheme = (theme) => {store.commit('switchTheme', theme)}
</script>
<style lang="less" scoped>.test {// 使用第一步定义的样式变量color: var(--primary-color);}
</style>

至此就可以了,其实思路很简单:就是在根目录上面绑定样式,通过切换这个样式来做到主题的切换,如果使用的主题量很大,是不是就得考虑性能问题了...

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

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

相关文章

后端Node学习项目-项目基础搭建

前言 各位好&#xff0c;我是前端SkyRain。最近为了响应公司号召&#xff0c;开始对后端知识的学习&#xff0c;作为纯粹小白&#xff0c;记录下每一步的操作流程。 项目仓库&#xff1a;https://gitee.com/sky-rain-drht/drht-node 因为写了文档&#xff0c;代码里注释不是很…

6-1.Java 面向对象 - 初级(对象与属性、对象与方法、递归、重载、可变参数、作用域、构造器、对象创建流程详解、this 关键字)

一、对象与属性 1、基本介绍 属性是类的一个组成部分&#xff0c;一般是基本数据类型&#xff0c;也可以是引用数据类型 属性的定义语法类似变量 【访问修饰符】 【属性类型】 【属性名】;属性的定义类型可以为任何类型&#xff08;基本数据类型、引用数据类型&#xff09;…

Maven(六)mvn 命令将 jar 包推送到 远程/本地仓库

目录 一、deploy - 推送到远程仓库1.1 命令语法&#xff1a;1.2 执行结果&#xff1a;1.3 可能遇到的问题问题1&#xff1a;with status code 401问题2&#xff1a;with status code 405问题3&#xff1a;Cannot deploy artifact from the local repository 二、install - 推送…

C语言心型代码解析

方法一 心型极坐标方程 爱心代码你真的理解吗 笛卡尔的心型公式&#xff1a; for (y 1.5; y > -1.5; y - 0.1) for (x -1.5; x < 1.5; x 0.05) 代码里面用了二个for循环&#xff0c;第一个代表y轴&#xff0c;第二个代表x轴 二个增加的单位不同&#xff0c;能使得…

JVM 由多个模块组成,每个模块负责特定的功能

Java虚拟机&#xff08;JVM, Java Virtual Machine&#xff09;是一个抽象的计算机&#xff0c;它提供了一个运行环境&#xff0c;使得Java字节码可以在不同的平台上执行。JVM 由多个模块组成&#xff0c;每个模块负责特定的功能。以下是 JVM 的主要模块及其功能&#xff1a; …

Java 中基于优先级执行任务的线程池实现

在日常开发中&#xff0c;我们经常遇到这样一种需求&#xff1a;需要按照任务的优先级顺序来执行&#xff0c;而不是简单的先进先出&#xff08;FIFO&#xff09;。Java 提供了 PriorityBlockingQueue&#xff0c;这是一个基于优先级排序的线程安全队列&#xff0c;可以用于实现…

CES2025展会媒体发布现场邀约采访计划来啦!海外科技电子媒体报纸新闻宣传方案

【本篇由 言同数字全球媒体投放 原创】一、CES 2025 展会概述 CES&#xff08;国际消费电子展&#xff09; 是全球规模最大、最具影响力的消费电子展会之一&#xff0c;由美国消费技术协会&#xff08;CTA&#xff09;主办。每年1月&#xff0c;CES吸引来自全球各地的行业领袖…

Axure设计之三级联动选择器教程(中继器)

使用Axure设计三级联动选择器&#xff08;如省市区选择器&#xff09;时&#xff0c;可以利用中继器的数据存储和动态交互功能来实现。下面介绍中继器三级联动选择器设计的教程&#xff1a; 一、效果展示&#xff1a; 1、在三级联动选择器中&#xff0c;首先选择省份&#xff…

【1】 Kafka快速入门-从原理到实践

文章目录 🔍 一、引言📜 二、Kafka 的历史🏗️ 三、Kafka 的核心结构🖥️ (一)Broker📋 (二)Topic📄 (三)Partition📤 (四)Producer📥 (五)Consumer🐒 (六)Zookeeper💡 四、Kafka 的重点概念📨 (一)消息📏 (二)偏移量(Offset)🔄 (…

使用Docker-Compose安装redis,rabbitmq,nacos,mysql,nginx,tomcat,portainer组件教程

因为开发经常会用到一些组件&#xff0c;又不想在本地启动&#xff0c;所以买了个服务器&#xff0c;然后将这些组件都安装到服务器上以便开发使用。下面就记录下使用docker-compose安装组件的教程以及一些需要注意的地方。 关于docker和docker-compose的安装在另一篇博客中有…

安装PyG

PyG安装 官方链接 Installation — pytorch_geometric documentation (pytorch-geometric.readthedocs.io) 安装步骤&#xff1a; 步骤一&#xff1a;安装Anaconda和CUDA 安装Anaconda-CSDN博客安装CUDA-CSDN博客 步骤二&#xff1a;查看支持的Python版本 步骤三&#xf…

如何在Linux中使用Cron定时执行SQL任务

文章目录 前言一、方案分析二、使用步骤1.准备脚本2.crontab脚本执行 踩坑 前言 演示数据需要每天更新监控数据&#xff0c;不想手动执行&#xff0c;想到以下解决方案 navicat 创建定时任务java服务定时执行linux crontab 定时执行sql脚本 一、方案分析 我选择了第三个方案…

夜天之书 #103 开源嘉年华纪实

上周在北京参与了开源社主办的 2024 中国开源年会。其实相比于有点明显班味的“年会”&#xff0c;我的参会体验更像是经历了一场中国开源的年度嘉年华。这也是在会场和其他参会朋友交流时共同的体验&#xff1a;在开源社的 COSCon 活动上&#xff0c;能够最大限度地一次性见到…

鸿蒙开启无线调试

DevEco Studio没找到通过WI-FI连接手机的可视化操作按钮&#xff0c;就去官网看了下hdc - TCP连接场景 操作也比较简单&#xff1a; 第1步&#xff1a;PC通过USB连接手机/平板&#xff1b; 第2步&#xff1a;在手机/平板的“开发者选项”中打开“无线调试”并记录下IP和端口…

Android Handler

Handler用于多线程消息分发和处理。与handler相关的几个对象&#xff1a;Message, Looper&#xff0c;MessageQueue, ThreadLocal. Handler是Message的消费者。 MessageQueue是容器。 Looper是整个Message分发的驱动。 Handler中有多种发送消息的方法&#xff0c;其中postxx…

C语言操作符详解(下)

⽬录 1. 单⽬操作符 2. 逗号表达式 3. 下标访问[]、函数调⽤() 4. 结构成员访问操作符 5. 操作符的属性&#xff1a;优先级、结合性 6. 表达式求值 一 单⽬操作符 1 分类 &#xff01;、 、 -- 、 & 、 * 、 、 - 、 ~ 、 sizeof 、 ( 类型 ) 1.1 "&q…

【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!

数据集介绍 【数据集】道路事故识别数据集 8939 张&#xff0c;目标检测&#xff0c;包含YOLO/VOC格式标注。数据集中包含2种分类&#xff1a;{0: accident, 1: non-accident}。数据集来自国内外图片网站和视频截图。检测范围道路事故检测、监控视角检测、无人机视角检测、等&…

跑批为什么这么难

业务系统产生的明细数据通常要经过加工处理&#xff0c;按照一定逻辑计算成需要的结果&#xff0c;用以支持企业的经营活动。这类数据加工任务一般会有很多个&#xff0c;需要批量完成计算&#xff0c;在银行和保险行业常常被称为跑批&#xff0c;其它像石油、电力等行业也经常…

C++类型推导decltype和auto

auto用于变量声明时根据表达式自动推导其类型 int x 10; auto y x; // y 的类型是 int double a 5.5; auto b a * 2; // b 的类型是double decltype 是 C11 引入的一个关键字&#xff0c;用于查询表达式的类型。它允许编译器在编译时推断出一个表达式的类型&#xff0c;…

Flutter 鸿蒙next 中使用 MobX 进行状态管理

Flutter & 鸿蒙next 中使用 MobX 进行状态管理 在应用开发中&#xff0c;状态管理是一个至关重要的环节&#xff0c;特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新&#xff0c;因此&#xff0c;选择一种高效、灵活的状态管理工具显得尤为重要。Mo…