vue换肤
- vue换肤实现思路就是找到顶级节点app，动态的更换#app的class类名即可
vue换肤
1
2
3
4
5
6
7
8<template>
<el-dropdown-item @click.native="changeColor('default')">
<span>系统风格-深蓝色</span>
</el-dropdown-item>
<el-dropdown-item @click.native="changeColor('blue')">
<span>系统风格-浅蓝色</span>
</el-dropdown-item>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20mounted(){
if(localStorage.getItem('app')){
var getClass = localStorage.getItem('app');
document.getElementById('app').className ='theme_' + getClass ;
this.localStorageDate(getClass);
}else {
document.getElementById('app').className ='theme_' + 'default' ;
this.localStorageDate('default');
}
},
methods:{
changeColor(type){
//把className theme1，theme2，theme3挂载在app.vue的<p id="app"></p>上
document.getElementById('app').className ='theme_'+type;
this.localStorageDate(type);
},
localStorageDate(type){
localStorage.setItem('app',type)
},
}在app页面引入换肤less文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default{
name: 'APP',
}
</script>
<style lang="less">
@import './assets/theme/index.less';
</style>theme/index.less文件
1
2
3
4
5
6
7
8
9
10- 换肤模板
.theme(@color,@kanbanBJ){
.text{
color:@color
}
.kanbanbj{
background: url(@kanbanBJ) no-repeat;
background-size:100% 100%;
}
} - 系统默认风格
1
2
3
4
5.theme_default{
@color:'#ffffff';
@kanbanBJ:'/static/img/bj.jpg';
.theme(@color,@kanbanBJ)
} - 系统浅蓝色风格
1
2
3
4
5.theme_blue{
@color:'blue';
@kanbanBJ:'/static/img/bj.jpg';
.theme(@color,@kanbanBJ)
}
