首页 > 其他分享 >VUE主题切换

VUE主题切换

时间:2024-08-21 16:51:04浏览次数:6  
标签:VUE color text 主题 theme state 切换 store setTheme

Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
			"theme": "theme-red",
	},		
	mutations: {
		setTheme(state, theme) {
			state.theme = theme
		},
			},
	actions:{
		setTheme: ({
			commit,
			state
		}, theme)=>{
			//获取主题配置信息
			commit("setTheme",res.data.theme)
		}
	}
})
export default store

  

 const themeMixins ={
 computed: {
 	theme() {
 		return this.$store.state.theme
 	}
 },
 methods: {
	 //设置样式
 	setTheme(theme){
 		this.$store.dispatch("setTheme",theme)
 	}
 }
}
 export default themeMixins

  定义css

@import "./theme-red.scss";
@import "./theme-blue.scss";

.text-color{
  color: var(--text-color);
}

  //主题定义

.theme-red {
  
  --text-color:#FFFFFF;

}

  

标签:VUE,color,text,主题,theme,state,切换,store,setTheme
From: https://www.cnblogs.com/zhaoyun4122/p/18371997

相关文章

  • vue3中script标签的setup实现原理
    概述当vue3新建组件时,我们有两种选择选项式和组合式,如下所示传统方式<script>import{ref}from"vue";exportdefault{setup(){constcount=ref(0);consthandleClick=()=>{count.value++;};return{count,handleClick......
  • springboot+vue服装搭配推荐系统【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着电子商务的蓬勃发展和个性化消费趋势的兴起,服装行业正经历着前所未有的变革。在海量商品面前,消费者往往面临选择困难,尤其是在服装搭配方面,如何根据个人喜好、身形特点以及场合需求快速找到最合适的搭配方案,成为众多消费者的迫切需......
  • springboot+vue扶贫助农与产品合作系统【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景在当前全球减贫事业与乡村振兴战略的双重背景下,扶贫助农已成为社会各界关注的焦点。随着信息技术的飞速发展,特别是互联网与电子商务的普及,为扶贫工作开辟了新路径。然而,农村地区由于信息不对称、物流成本高、销售渠道有限等问题,优质农......
  • springboot+vue峰数公司医疗设备管理系统【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着医疗技术的飞速发展,医疗设备的种类与数量日益增长,对医院运营管理提出了更高要求。峰数公司作为一家专注于医疗健康领域的企业,其业务范围广泛,涵盖从高端医疗设备供应到后期维护的全方位服务。然而,在传统管理模式下,设备信息散乱、管......
  • springboot+vue分类学科竞赛管理系统-后台2023【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着教育改革的深入和素质教育的全面推广,学科竞赛作为培养学生创新能力、实践能力和团队协作精神的重要途径,其重要性日益凸显。然而,传统的手工管理方式在应对日益增长的竞赛数量、复杂的竞赛分类及庞大的参赛学生信息时显得力不从心。......
  • VUEX基础入门Store使用详解
    【1】vuex是什么github站点:https://github.com/vuejs/vuex,在线文档:https://vuex.vuejs.org/zh-cn/Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的......
  • store vue 仓库的使用方法
    1.项目介绍store.js是一个轻量级的JavaScript库,旨在封装浏览器的localStorage功能,以实现跨浏览器兼容的本地存储解决方案。它不需要依赖于Cookie或Flash,提供简单易用的API,使得开发者可以方便地进行键值对存储操作。基础使用以下是一些基础操作示例://存储数据store......
  • vue 内嵌外部页面
    参考:https://blog.csdn.net/weixin_43957384/article/details/131111544PlanEmbedanHTMLpageinVue:UseaniframetoembedtheexternalHTMLpagewithinaVuecomponent.CommunicatebetweenVueandtheembeddedHTMLpage:UsepostMessageAPIforco......
  • 【Linux】gnome桌面环境切换KDE Plasma
    @目录安装KDEPlasma桌面环境添加软件源并更新apt安装kubuntu-desktop(作者没有成功)aptitude安装kubuntu-desktop多次aptitudeinstall(特别重要特别重要)其他kde软件包卸载gnome桌面Ubuntu自带的桌面环境是gnome,本文提供了安装KDEPlasma的教程,并解决了其中可能遇到的一些问题。......
  • 基于nodejs+vue协同过滤算法的音乐推荐系统 [程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,数字音乐已成为人们日常生活中不可或缺的一部分。面对海量的音乐资源,用户往往难以快速找到符合个人喜好的音乐作品。传统的音乐搜......