vue 一键换肤

思路,可以运用element 内的组件配合css样式
操作:页面中只需要添加一键换肤的操作时间进行配色即可。一般就是两种颜色,默认色和改变色,我的需求是改背景色,不改字体色,因为字体的色值颜色太多。我用了本地存储localStorage加store。

如果需要透明度,注意的是要给所有的组件背景色初始值 透明度 background: rgba(255, 255, 255, 0.05), 这个设置一般是在全局的css样式李设置,具体就要自己去元素李点击查看了;
不需要可以忽略。

 <el-button type="info" plain @click="changeSkin">一键换肤</el-button>定义一个初始色data () {return {themeColor: '#061729'}},然后时间中进行更改存值即可changeSkin () {if (this.themeColor === '#061729') {this.themeColor = '#031E3C' // 切换到新主题this.$store.commit('setThemeBackgroundColor', this.themeColor)} else {this.themeColor = '#061729' // 切换到原主题this.$store.commit('setThemeBackgroundColor', this.themeColor)}window.localStorage.setItem('theme', this.themeColor) // 保存当前主题色到localStorage// this.visible = !this.visible
},

在需要的页面进行计算属性

  computed: {currentComponentBackgroundColor () {return this.themeColor}},

页面渲染

<div class="header-container" :style="{background: currentComponentBackgroundColor}"></div>

在store 中存储

const state = {themeBackgroundColor:  window.localStorage.getItem('theme') // '#061729' // 默认主背景色
}const mutations = {setThemeBackgroundColor (state, color) {state.themeBackgroundColor = color}
}
即可。

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

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

相关文章

系统架构的演变:从单体到微服务的旅程

文章目录 前言一、单体架构简图 二、垂直架构简图 三、水平架构简图 四、面向服务架构&#xff08;SOA&#xff09;简图 五、微服务架构简图 总结 前言 随着信息技术的快速发展&#xff0c;系统架构也在不断演变。从早期的单体架构到现代的微服务架构&#xff0c;每一次的变革都…

62.Spring多线程事务 能否保证事务的一致性(同时提交、同时回滚)?

62.Spring多线程事务 能否保证事务的一致性(同时提交、同时回滚)? Spring的事务信息是存在ThreadLocal中的Connection, 所以一个线程永远只能有一个事务所以Spring 的事务是无法实现事务一致性的可以通过编程式事务,或者通过分布式事务的思路:二阶段提交方式扩展小课堂 1…

Python封装tvdi算法为exe并读取xml

目录 一、封装之前的准备1. 代码2.xml二、封装三、执行exe一、封装之前的准备 代码主要看最后if name == ‘main’:的部分 解析了xml中对应的输入输出路径,最后再读取输入文件运行自己的算法部分,xml文件见下面 1. 代码 try:import gdal except:from osgeo import gdal im…

mac PyCharm 上传文件到远程服务器+远程服务器下载到本地

1 部署配置 选择SFTP name&#xff1a;test6 输入ssh账号和密码。保存密码和30s心跳。 2 目录映射 Local path&#xff08;本地mac机器&#xff09;&#xff1a;/Users/clevercode/PycharmProjects/test6 Root path&#xff08;远程服务机器&#xff09;&#xff1a;/home/…

【汇编】 13.3 对int iret和栈的深入理解

书中示例 assume cs:codecode segment start:mov ax,csmov ds,axmov si,offset lpmov ax,0mov es,axmov di,200hmov cx,offset end0-offset lpcldrep movsb ;lp到end0的指令传送到0:200处mov ax,0mov es,axmov word ptr es:[7ch*4],200hmov word ptr es:[7ch*42],0 ;设置7c表项…

Kafka-消费者-Consumer Group Rebalance设计

在同一个Consumer Group中&#xff0c;同一个Topic的不同分区会分配给不同的消费者进行消费&#xff0c;那么为消费者分配分区的操作是在Kafka服务端完成的吗?分区是如何进行分配呢?下面来分析Rebalance操作的原理。 方案一 Kafka最开始的解决方案是通过ZooKeeper的Watcher…

583.两个字符串的删除操作 72.编辑距离

583.两个字符串的删除操作 72.编辑距离 583.两个字符串的删除操作 力扣题目链接(opens new window) 给定两个单词 word1 和 word2&#xff0c;找到使得 word1 和 word2 相同所需的最小步数&#xff0c;每步可以删除任意一个字符串中的一个字符。 示例&#xff1a; 输入: “…

dubbo项目发布时Destroyed异常分析

1、问题现象 在发布项目时&#xff0c;elk有打印use dubbo version 2.6.2 is DESTROYED, can not be invoked any more!相关的报错日志&#xff0c;来提示dubbo消费者调用生产者时&#xff0c;生产者服务已经DESTROYED。 ChatGpt可知&#xff1a; 2、问题溯源 com.alibaba.dub…

序列到序列模型

一.序列到序列模型的简介 序列到序列&#xff08;Sequence-to-Sequence&#xff0c;Seq2Seq&#xff09;模型是一类用于处理序列数据的深度学习模型。该模型最初被设计用于机器翻译&#xff0c;但后来在各种自然语言处理和其他领域的任务中得到了广泛应用。 Seq2Seq模型的核…

怎样通过powershell 打开win10的自动更新?

要通过PowerShell命令打开Windows 10的自动更新&#xff0c;可以按照以下步骤操作&#xff1a; 打开PowerShell&#xff1a;在Windows 10中&#xff0c;点击“开始”按钮&#xff0c;输入“PowerShell”&#xff0c;然后选择“Windows PowerShell”。 以管理员身份运行PowerSh…

【软件测试学习笔记6】Linux常用命令

格式 command [-options] [parameter] command 表示的是命令的名称 []表示是可选的&#xff0c;可有可无 [-options]&#xff1a;表示的是命令的选项&#xff0c;可有一个或多个&#xff0c;也可以没有 [parameter]&#xff1a;表示命令的参数&#xff0c;可以有一个或多…

VLAN区域间路由详解

LAN局域网 WAN 广域网 WLAN无线局域网 VLAN:虚拟局域网 交换机和路由器&#xff0c;协同工作后&#xff0c;将原来的一个广播域&#xff0c;切分为多个&#xff0c;节省硬件成本&#xff1b; 配置思路&#xff1a; 交换机上创建vlan交换机上的各个接口划分到对应的vlan中 T…

微信小程序页面传值的几种方式

1.URL参数传值&#xff1a;通过在跳转链接中附加参数&#xff0c;在目标页面的onLoad函数中获取参数。 2.全局变量&#xff1a;通过在app.js文件中定义全局变量&#xff0c;在源页面设置变量的值&#xff0c;目标页面通过getApp().globalData获取变量的值。 3.缓存存储&#xf…

flink源码分析 - yaml解析

flink版本: flink-1.12.1 代码位置: org.apache.flink.configuration.GlobalConfiguration 主要看下解析yaml文件的方法: org.apache.flink.configuration.GlobalConfiguration#loadYAMLResource /** Licensed to the Apache Software Foundation (ASF) under one* or…

尚无忧【无人共享空间 saas 系统源码】无人共享棋牌室系统源码共享自习室系统源码,共享茶室系统源码

可saas多开&#xff0c;非常方便&#xff0c;大大降低了上线成本 UNIAPPthinkphpmysql 独立开源&#xff01; 1、定位功能&#xff1a;可定位附近是否有店 2、能通过关键字搜索现有的店铺 3、个性轮播图展示&#xff0c;系统公告消息提醒 4、个性化功能展示&#xff0c;智能…

LED车灯电源解决方案SCT8162x、SCT2464Q、SCT71403Q、SCT71405Q、SCT53600等

随着LED封装技术的成熟和成本的下降&#xff0c;LED车灯渗透率迅速提升。车灯控制技术不断向节能化、智能化和个性化方向发展。ADB大灯配置门槛下探&#xff0c;像素数据急剧增加&#xff0c;LED 数量不断增加&#xff0c;陆续有智能车灯达到百万级像素&#xff0c;且动画效果需…

【算法小记】深度学习——循环神经网络相关原理与RNN、LSTM算法的使用

文中程序以Tensorflow-2.6.0为例 部分概念包含笔者个人理解&#xff0c;如有遗漏或错误&#xff0c;欢迎评论或私信指正。 卷积神经网络在图像领域取得了良好的效果&#xff0c;卷积核凭借优秀的特征提取能力通过深层的卷积操作可是实现对矩形张量的复杂计算处理。但是生活中除…

前端——框架——Vue

提示&#xff1a; 本文只是从宏观角度简要地梳理一遍vue3&#xff0c;不至于说学得乱七八糟、一头雾水、不知南北&#xff0c;如果要上手写代码、撸细节&#xff0c;可以根据文中的关键词去查找资料 简问简答&#xff1a; vue.js是指vue3还是vue2&#xff1f; Vue.js通常指的是…

DNS - 全家桶(114 DNS、阿里DNS、百度DNS 、360 DNS、Google DNS)

DNS是什么&#xff1f; DNS是域名系统,Domain Name System的缩写,是一个服务。 DNS就是把域名解析为IP地址&#xff0c;提供我们上网&#xff0c;我们能够上网最终是找到IP地址。 比如&#xff0c;http://xxxx.com是域名&#xff0c;那么他的IP地址假设是144.144.144.144&am…

网络安全中的人工智能:保护未来数字世界的利剑

随着现代社会的数字化进程不断推进&#xff0c;网络安全问题变得日益严峻。为了更好地应对日益复杂的网络威胁&#xff0c;人工智能&#xff08;AI&#xff09;技术正被广泛应用于网络安全领域。 在互联网的时代背景下&#xff0c;网络安全已成为国家和企业面临的一项重大挑战。…