更新
不需要全局引入less或者scss的可以直接在body上面挂载css变量
body{
--baseColor: #4F94FA;
--activeColor: #4F94FA;
--fontColor: #4F94FA;
}
然后在需要使用的地方
.title{
color:var(--baseColor);
}
=======================================================================
最近做一个主题切换功能，查了一下网上的实现方式，找到的都不是我想要的效果，于是我便按照自己的想法做了一套方案。
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来修改，具体实现看个人需求
