sección theme.scss
// 默认主题
$default-theme : (
header-bg-color: linear-gradient( #009999,#008888),
header-font-color:#fff,
menu-color:#009999,
);
//黑色主题
$black-theme : (
header-bg-color:linear-gradient( #888,#333),
header-font-color:#fff,
menu-color:#444,
);
//蓝色主题
$blue-theme : (
header-bg-color:linear-gradient( #409EFF,#409ddd),
header-font-color:#fff,
menu-color:#409EFF,
);
$themes: (
default-theme: $default-theme,
blue-theme: $blue-theme,
black-theme:$black-theme
);
//遍历生成对应样式表
@mixin base-bg-color($color){
@each $themename , $theme in $themes {
[data-theme = '#{
$themename}'] & {
background: map-get($map: $theme, $key: $color );
font-size: map-get($map: $theme, $key: $color )
}
}
}
Introduzca theme.scss en el componente.
<style lang="scss" scoped="">
@import "../../styles/theme.scss";
.pc-content {
width: 100%;
min-height: 100vh;
}
.main-header {
width: 100%;
height: 80px;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 5px #888;
@include base-bg-color(header-bg-color);
.left {
width: 330px;
height: 100%;
align-items: center;
justify-content: center;
p {
font-size: 28px;
font-weight: 500;
color: #fff;
}
}
.right {
width: calc(100% - 330px);
align-items: center;
justify-content: space-between;
height: 100%;
padding-right: 20px;
div {
color: #fff;
i {
font-size: 25px;
margin: 0 8px;
}
display: flex;
}
}
}
.main-veiw {
width: 100%;
height: calc(100vh - 80px);
align-items: center;
justify-content: space-between;
.left {
width: 330px;
height: 100%;
@include base-bg-color(menu-color);
}
.right {
width: calc(100% - 330px);
min-height: 100%;
}
}
.flex-row-veiw {
display: flex;
.flex-veiw {
display: flex;
}
}
</style>
Usado en App.vue
nowTheme es una variable de 'tema-predeterminado' y 'mi-tema'
<template>
<div id="app" :data-theme='nowTheme'> <!-- data-theme绑定变量 -->
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'app' ,
data(){
return{
nowTheme:'default-theme'
}
},
watch: {
//监听vuex中theme值的变化
'$store.state.user.theme': function (val) {
this.nowTheme=val
}
}
}
</script>
Control de código html
<el-select v-model="theme" placeholder="请选择" @change="changeTheme">
<el-option v-for="item in themes" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
Código js de ubicación de control
export default {
data() {
return {
role: 'admin',
theme:'default-theme',
themes:[
{
label:'默认',
value:'default-theme'
},
{
label:'蓝色系列',
value:'blue-theme'
},
{
label:'黑色系列',
value:'black-theme'
}
]
}
},
methods: {
layout() {
this.$router.push({
path: '/login'
})
},
changeTheme(value){
this.$store.commit('SET_THEME',value)
console.log(JSON.stringify(this.$store))
}
}
}
¡Eso es todo! ! !
efecto final
