最近做一个主题切换功能,查了一下网上的实现方式,找到的都不是我想要的效果,于是我便按照自己的想法做了一套方案。
style.less //定义颜色等主题变量并全局引入 factory.js //定义修改变量值的方法 vuex //管理动态变更主题样式单一值 model
.js //存放固定方案主题样式
首先我们要全局引入一个style.less文件,这样可以在项目中直接调用style.less中的变量,为了实现这个功能我们需要借助插件。
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
安装完成之后在配置里面添加
pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [
path.resolve(__dirname, "src/theme/style.less")] // 引入全局样式变量 } }
到这一步,我们已经可以在项目里面直接使用style.less里面的变量
stye.less
@baseColor:var(--baseColor, #4F94FA); @activeColor: var(--activeColor, #4F94FA)
; @fontColor:var(--fontColor, #4F94FA); :export { name: "less"; baseColor:
@baseColor; activeColor: @activeColor; fontColor:@fontColor; }
组件内部样式
<style lang="less"> .app-header { background-color: @baseColor; } </style>
这里的:export是为了导出样式中的变量值,不需要的可以不使用,var(–变量名,变量值)这是css中的使用方式为了后续在js更改值。
factory.js
/** * 切换主题修改页面样式 **/ export const changeStyle=(obj)=>{ for(let key in obj){
document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
; } }
这里通过直接操作页面元素的方式修改页面样式的值。
import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from
'./actions'; import * as getters from './getters'; import * as mutations from
'./mutations'; import Account from 'js/model/common/account'; Vue.use(Vuex);
const state = { baseColor:'#4F94FA' }; export default new Vuex.Store({ state,
actions, getters, mutations });
变更的值可以通过vuex来管理在state中存放baseColor

页面中绑定
<el-color-picker v-model="$store.state.baseColor" @change="SwitchTheme" title="
主题" class="color"></el-color-picker>
切换主题色
SwitchTheme(){ let obj = { baseColor:this.$store.state.baseColor } changeStyle(
obj) }
本地存储主题数据
model.js
/** * 自定义主题方案 **/ export const menusModel = { themeA: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, themeB: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, themeC: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, themeD: { baseColor:'#FFF',
activeColor:'#4f94fa', fontColor:'#333', }, }
读取本地或者远程的样式数据,通过changeStyle来修改,具体实现看个人需求

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述