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;代码里注释不是很…

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;能使得…

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

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

使用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;能够最大限度地一次性见到…

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;其它像石油、电力等行业也经常…

A012-基于Spring Boot的私房菜定制上门服务系统的设计与实现

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统私房菜定制上门服务系统信息管理难度大&#xff0c;容错率…

配有生物振膜的FPS电竞耳机,血手幽灵M760,精准定位每一声脚步

在PC上玩游戏的时候&#xff0c;一款高性能的游戏耳机是提升游戏体验的关键&#xff0c;特别是在吃鸡等FPS类游戏中&#xff0c;耳机不仅是听觉享受的工具&#xff0c;更是决定胜负的关键装备。如果耳机的环绕立体声效果能够及时准确的做出反应&#xff0c;我在游戏中就能清晰地…

OceanBase详解及如何通过MySQL的lib库进行连接

OceanBase详解及如何通过MySQL的lib库进行连接 一、引言二、OceanBase概述1. 起源与发展2. 核心技术特点3. 应用场景三、OceanBase架构解析1. 系统架构2. 存储引擎3. 分布式架构四、如何使用MySQL的lib库连接OceanBase1. 前提条件2. 安装MySQL Connector/C3. 编写连接代码4. 编…

GPT原理;ChatGPT 等类似的问答系统工作流程如下;当用户向 ChatGPT 输入一个问题后:举例说明;ChatGPT不是通过索引搜索的传统知识库

目录 GPT原理 GPT架构 GPT 主要基于 Transformer 的解码器部分 ChatGPT 等类似的问答系统工作流程如下: 用户输入 文本预处理 模型处理 答案生成 输出回答 当用户向 ChatGPT 输入一个问题后:举例说明 文本预处理: ChatGPT不是通过索引搜索的传统知识库 GPT GPT…

【系统设计——认证授权——基本概念知识】

1. 认证和授权的区别 Authentication&#xff08;认证&#xff09; 是验证您的身份的凭据&#xff08;例如用户名/用户 ID 和密码&#xff09;&#xff0c;通过这个凭据&#xff0c;系统得以知道你就是你&#xff0c;也就是说系统存在你这个用户。所以&#xff0c;Authenticat…

Java:数据结构-再谈String类

字符串常量池 首先我们来思考这段代码&#xff0c;为什么运行结果一个是true&#xff0c;一个是false呢&#xff1f; public class Test {public static void main(String[] args) {String s1"123";String s2"123";String s3new String("555")…

centos7,yum安装mongodb

yum安装mongodb 1.配置MongoDB的yum源2.安装Mongodb3.启动Mongodb4.配置远程访问5.设置mongo密码 1.配置MongoDB的yum源 1.创建yum源文件&#xff0c;输入命令&#xff1a; vim /etc/yum.repos.d/mongodb-org-5.0.repo然后在文件中输入以下内容并保存&#xff1a; [mongodb-…

关于软测面试的20个终极问题,春招软测人快来看..

1. 项目测试流程你是怎么开展的&#xff1f; 【参考回答】 首先&#xff0c;需求分析阶段&#xff0c;主要参与需求评审会议&#xff0c;阅读理解业务需求&#xff0c;分析需求点。 需求确定后&#xff0c;进入测试计划阶段&#xff0c;参考软件需求规格说明书及项目总体计划…