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.xdnf.cn/news/6448.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

PyQt5实战——翻译器的UI页面设计以及代码实现(七)

个人博客&#xff1a;苏三有春的博客 系类往期文章&#xff1a; PyQt5实战——多脚本集合包&#xff0c;前言与环境配置&#xff08;一&#xff09; PyQt5实战——多脚本集合包&#xff0c;UI以及工程布局&#xff08;二&#xff09; PyQt5实战——多脚本集合包&#xff0c;程序…

【种完麦子,我就往南走,去西双版纳,过个冬天!】

麦子奶奶&#xff1a;冰哥&#xff0c;你好。 大冰&#xff1a;你好&#xff0c;咱俩不定谁大呢。 麦子奶奶&#xff1a;嗯&#xff0c;我大&#xff0c;我60多了&#xff0c;你各方面都是哥。 大冰&#xff1a;阿姨好 麦子奶奶&#xff1a;我想出去看看祖国的大好河山&…

koa + sequelize做距离计算(MySql篇)

1.核心思路 1.利用sequelize的fn方法调用MySql原生函数&#xff08;st_distance_sphere、point&#xff09; 2.这里利用到了MySql的原生函数&#xff0c;不懂可以去看看mysql的函数知识 2.核心代码 //st_distance_sphere、point函数用来计算当前经纬度和目的地经纬度 //col…

编译工具与文件学习(一)-YAML、repos、vcstoolcolcon

YAML YAML&#xff08;YAML Ain’t Markup Language&#xff09;是一种人类可读的数据序列化格式&#xff0c;常用于配置文件、数据交换和存储结构化数据。YAML 的设计目标是简洁、易读&#xff0c;并且能够表示复杂的数据结构。 YAML 文件的基本语法 基本结构&#xff1a; Y…

【数据结构】Java 集合 Set 接口及其实现类的定义简介

接口继承接口&#xff0c;类实现接口。 Set 是一个接口&#xff0c;实现了 Collection 接口&#xff08;都带有泛型&#xff09;。它可以被继承或实现。在Java 集合章节的知识点中&#xff0c;学习其子类对象的实现以及关系。 类关系图 可以在IDEA中直接生成 集合 Set 类关系…

【青牛科技】应用方案 | D75xx-150mA三端稳压器

概 述 D75XX系列是一套三端高电流低压稳压器。它们可以提供 150mA 的输出电流和允许输入电压高达30V。它们有几个固定的输出电压范围为3.0 V至5.0 V。CMOS 技术确保低电压降和低静态电流。 虽然这些设备主要设计为固定电压调节器&#xff0c;但它们可以与外部元件一起使用&…

(三)使用Vite创建Vue项目,了解Vue3生命周期

&#xff08;三&#xff09;使用Vite创建Vue项目 序章Vite官网安装方式一安装方式二 Vue3生命周期生命周期的详细解释 序章 其实这个没什么难点&#xff0c;步骤也非常简单&#xff0c;首先我们在本地的目录上创建一个x项目文件夹,然后在控制台上敲一些命令即可。 Vite官网 Vi…

批量清除Word Excel PPT文件打开密码

工作中经常要处理很多带密码的Excel文件&#xff0c;如果一个一个手动删除密码&#xff0c;那工作量就很大了。 网上找了很多方法&#xff0c;都没有找到一个好用的能批量删除密码的软件。 下载地址&#xff1a;https://pan.quark.cn/s/e3bffeec5458 于是就写了一个批量删除E…

【Effective C++】阅读笔记3

1. 成员变量声明为Private 建议将成员变量声明为Private&#xff0c;然后再public中提供调用该数据的接口 设置成Private的原因分析 类内成员变量被声明为Private&#xff0c;那么就可以外部代码直接访问或者修改内部数据通过公共接口获取内部数据&#xff0c;这样可以减少对外…

QCustomPlot添加自定义的图例,实现隐藏、删除功能(二)

文章目录 QCustomPlot初识和基本效果图实现步骤:详细代码示例:实现原理和解释:使用方法:其他参考要实现一个支持复选框来控制曲线显示和隐藏的自定义 QCPLegend 类,可以通过继承 QCPLegend 并重写绘制和事件处理方法来实现,同时发出信号通知曲线的状态变更。 QCustomPl…

基于Java公益志愿捐赠管理系统设计与实现(源码+LW+调试+开题报告)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

【反射率】-- Lab 转换(excel)

系列文章目录 文章目录 系列文章目录前言一、CIE1.CIE 简介2.cie 1931标准色度匹配函数数据3.从CIE1931RGB到CIE1931 XYZ 二、Lab颜色空间的理解1.Lab色差公式怎么计算色差 三、D65光源Lab计算总结 前言 一、CIE 1.CIE 简介 CIE是由国际照明工程领域中光源制造、照明设计和光…

RRSIS: Referring Remote SensingImage Segmentation

Abstract 从遥感图像中定位目标在实际应用中有很大的用处。 参考图像分割的目的是分割出给定表达所指向的对象&#xff0c;这在自然图像中得到了广泛的研究。我们为这项任务创建了一个名为RefSegRS的新数据集&#xff0c;使我们能够评估不同的方法。我们提出了一种语言引导的跨…

【论文复现】自动化细胞核分割与特征分析

本文所涉及所有资源均在这里可获取。 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 论文复现 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; 自动化细胞核分割与特征分析 引言效果展示HoverNet概述HoverNet原理分析整…

长亭那个检测能力超强的 WAF,出免费版啦

告诉你们一个震撼人心的消息&#xff0c;那个检测能力超强的 WAF——长亭雷池&#xff0c;他推出免费社区版啦&#xff0c;体验地址见文末。 八年前我刚从学校毕业&#xff0c;在腾讯做安全研究&#xff0c;看到宇森在 BlackHat 上演讲的议题 《永别了&#xff0c;SQL 注入》 …

U-net网络实现细胞分割

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

Word首行空格不显示空格符号问题

Word段落首行空格设置指南 问题描述 在Word中编辑文档时&#xff0c;有时会遇到段落首行敲击空格键却不显示空格的问题。这通常与Word的自动更正设置有关。 解决方法 要解决此问题&#xff0c;需要调整Word的自动更正设置。具体步骤如下&#xff1a; 打开Word的"自动更…

Remix部署智能合约时报错:Gas estimation failed

1、在Remix部署智能合约时报错如下&#xff1a; 2、这时候即使发送交易&#xff0c;也无法部署 3、后来看到有人建议说调整一下GAS LIMIT&#xff0c;调整到30000000也不行&#xff0c;甚至当调整到6000000以后连交易记录都没有了 4、最终解决办法&#xff1a;Remix 和 Ganache…

我要精通前端-块级元素和行内元素深入学习笔记

真的发现前端天天增删改查&#xff0c;真的是问一些比较细节的知识&#xff0c;我真的懂么 1、块级元素间的margin会重叠&#xff0c; <div class"head"></div> <div class"content"></div>.head {margin: 5px;border: 10px sol…

C语言 循环高级

时间&#xff1a;2024.11.6 一、学习内容 1、无限循环 无限循环&#xff1a;循环永远停不下来 注意点&#xff1a;无限循环因为永远停不下来&#xff0c;所以下面不能再写其他的代码了 2、break 跳转控制语句&#xff1a; 在循环的过程中&#xff0c;跳到其他语句上执行 #…