vue项目换肤功能

福小娟儿

已于 2023-02-15 17:46:07 修改

阅读量545

点赞数

分类专栏： vue 文章标签： vue.js

于 2020-12-24 17:36:29 首次发布

本文链接：https://blog.csdn.net/qq_40969782/article/details/111642208

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用SCSS变量和映射创建多种主题，并结合Vue实现动态主题切换。通过定义默认、黑色和蓝色主题，然后在组件中引入并应用这些主题。在App.vue中监听变量改变，结合Vuex管理和localStorage持久化主题选择，实现在不同页面间保持主题一致。同时，展示了在控制台通过下拉选择切换主题的实现方式。

摘要由CSDN通过智能技术生成

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 )
        }
    }
}

组件中引入theme.scss

<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>

App.vue中使用

nowTheme为 ’default-theme‘、’my-theme‘ 的变量

<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>

控制处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>

控制位置js代码

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))
			}
		}
	}

mutations中SET_THEME方法内部逻辑

SET_THEME:(state,themeName)=>{
	state.currentTheme=themeName
	localStorage.setItem('currentTheme',currentTheme)
	// 划重点，需要找到data-theme这个属性改掉值
	document.body.setAttribute('data-theme',currentTheme)
}