------前端换肤------

1.前端的样式全局布局的情况下，通过定义全局变量统一底色，我是在app.vue中定义的色值:

<style>body {--generalcolor: #2441a2;--headerLeft: #1e3582;}
</style>

2.在需要换肤的点击事件那里:

data() {return {blueColor:{generalcolor: '#2441a2',headerLeft: '#1e3582'},yellowColor: {generalcolor: '#ffff00',headerLeft: '#c1c103',},redColor: {generalcolor: '#ff0000',headerLeft: '#c10000',}}}//这里是点击事件
changeColor(type) {console.log(type)let nowColor = {generalcolor: type.generalcolor,headerLeft: type.headerLeft}// type = JSON.parse(type);document.body.style.setProperty('--generalcolor',type.generalcolor)document.body.style.setProperty('--headerLeft',type.headerLeft)// 这里是存储到了本地localstroage中，防止刷新后的失效Vue.ls.set(NOW_COLOR, nowColor, 24 * 60 * 60 * 1000);},

3.最后，我是在vue的app.vue中初始化第一次加载的时候判断，是否本地存储中有色值，有的话调用覆盖:

//app.vue中
created () {if(Vue.ls.get(NOW_COLOR)) {document.body.style.setProperty('--generalcolor',Vue.ls.get(NOW_COLOR).generalcolor)document.body.style.setProperty('--headerLeft',Vue.ls.get(NOW_COLOR).headerLeft)}}

4.到这换肤功能就完成啦！！！！

-----前端换肤----相关推荐

前端换肤功能如何实现
关于换肤统一的颜色变量,css 变量或者 sass 变量或者 less 变量都可以通过计算规则生成多种主题,对应上述变量,dark light default 等等切换主题,加载对应的主题的文件 ...
ajax换肤,聊一聊前端换肤
之前在做网站换肤,所以今天想聊聊网站换肤的实现.网页换肤就是修改颜色值,因此重点就在于怎么来替换. 一般实现如上图,我们会看到在某些网站的右上角会出现这么几个颜色块,点击不同的颜色块,网站的整体颜色 ...
最成熟的前端换肤方案（主题切换）
前言在网上找了很多的换肤方案,其中我认为写的最好的也是有demo 的无疑是这篇,但是同时也发现了一些问题,就是太多方案不知道选哪个,而且没有做持久化处理,并且没有把图片切换的代码放在一起.我这边的需 ...
【前端换肤】前端换肤方案
提前引入所有主题样式,做类名切换 <div class="box"><p>hello</p></div><p>选择样式: ...
【css】前端换肤功能方案调研 css变量换肤实践
场景:应用要做深浅两套主题,内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式. 技术栈:vue-cli3 + less + Vant 接到需求后,上网调研了几种方案:切换className.切换 ...
关于项目主题换肤的一些方案
前言前端换肤技术实施的核心是替换项目中定义的各种颜色值,一般来讲,需要将这些所有的颜色值整理在一个文件中,以便于统一管理.统一配色.所以在实际开发过程中,为页面各个模块设置对应的颜色值时,都需要在这 ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
前端 “一键换肤“ 的几种方案
作者:熊的猫原文:https://juejin.cn/post/7063010855167721486 前端 "一键换肤" 的几种方案前言现在越来越多的网站都提供了拥有换肤( ...
前端项目一键换肤vue+element(ColorPicker)
前端项目一键换肤 1.需要配色的都是用变量声明 2.增加颜色选择器 3.改变颜色,更改初始值 1.需要配色的都是用变量声明 /* 全局样式 */ body {// 无需改变--light_color_ ...

-----前端换肤----

------前端换肤------

1.前端的样式全局布局的情况下，通过定义全局变量统一底色，我是在app.vue中定义的色值:

2.在需要换肤的点击事件那里:

3.最后，我是在vue的app.vue中初始化第一次加载的时候判断，是否本地存储中有色值，有的话调用覆盖:

4.到这换肤功能就完成啦！！！！

-----前端换肤----相关推荐

最新文章

热门文章