vue项目实现换肤（样式、字体、背景）

后台管理项目一般都会加一些主题配色，最近在用vue写一个后台管理系统，也加了一个可以实时改变主题色彩。先看一下效果：

项目的基色，可以通过颜色选择器进行更改：

vue可以实现数据的双向绑定，要想所有的组件都使用可以实时改变的基色，思来想去还是vuex。

1、首先在vuex state里定义一个默认的主题颜色：（baseColor: '#2270e9'）

2、然后把这个state和颜色选择器（我项目使用的element-ui）进行双向绑定。

<el-color-picker v-model="$store.state.baseColor" title="主题"></el-color-picker>

3、在需要根据主题颜色改变的地方，进行数据绑定：

背景颜色 :style="{backgroundColor: $store.state.baseColor}"
字体颜色 :style="{color: $store.state.baseColor}"

几行代码，一个项目的主题配色就搞定了！

如果想要系统，保持主题配色（刷新还在，页面关了之后才回到默认）可以进行页面关闭监听，然后配合sessionStorage进行使用。如果想一直保持主题配色（刷新、关闭打开还是改变的主题）可以使用localStorage使用。

vue项目实现换肤（样式、字体、背景）相关推荐

前端vue项目一键换肤主题技术方案
一.技术核心通过切换 css 选择器的方式实现主题样式的切换. 在组件中保留不变的样式,将需要变化的样式进行抽离提供多种样式,给不同的主题定义一个对应的 CSS 选择器根据不同主题通过切换CSS ...
vue中利用scss实现整体换肤和字体大小设置
一.前言利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...
前端项目一键换肤vue+element(ColorPicker)
前端项目一键换肤 1.需要配色的都是用变量声明 2.增加颜色选择器 3.改变颜色,更改初始值 1.需要配色的都是用变量声明 /* 全局样式 */ body {// 无需改变--light_color_ ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
Android 换肤（全局换肤，部分换肤，字体替换，导航栏替换，自定义view换肤，夜间/日间模式）
采集大致流程监听所有activity的生命周期回调 //SkinActivityLifecycle application.registerActivityLifecycleCallbacks(n ...
Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）
VUE项目动态切换皮肤/主题的通用实现方式提供一种通用的的解决方案,无需重启项目,无需更改import的文件路径,直接通过功能按钮热更换皮肤/主题 vue-cli版本:3.0 1. 在pulic目录 ...
关于项目主题换肤的一些方案
前言前端换肤技术实施的核心是替换项目中定义的各种颜色值,一般来讲,需要将这些所有的颜色值整理在一个文件中,以便于统一管理.统一配色.所以在实际开发过程中,为页面各个模块设置对应的颜色值时,都需要在这 ...

vue项目实现换肤（样式、字体、背景）

vue项目实现换肤（样式、字体、背景）相关推荐

最新文章

热门文章