一、目的
此次写作内容是在我之前发布一篇文章的基础上进行新增的。
上一篇文章：Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客
这次要实现在页面上新增一个切换主题风格的按钮，点击后实现页面主题风格的切换功能。
二、效果图
三、具体实现步骤
1、前期准备：使用 bus 进行组件通信
在要相互通信的组件之间，引入一个新的 Vue 实例，然后分别通过调用这个实例的事件触发和监听，来实现通信和参数传递。
在utils 文件夹下放入 bus.js 文件：
import Vue from 'vue'const bus = new Vue() // 使用 Event Busexport default bus
这里简单说一下 bus.js 的用法：
import bus from '@/utils/bus'bus.$emit('message', 'hello') // 发送信息（ 第一个参数为标志变量，第二个参数为通信的值 ）
import bus from '@/utils/bus'bus.$on('message', (e) => { // 接收信息（ 第一个参数为标志变量，第二个参数中的e为通信的值 ）console.log(e)})
2、前期准备：安装 sass
这里既然要有切换风格的功能，那么就会有两套及两套以上的样式，所以用CSS 预处理器（sass），实现用哪套样式时的切换。这里采用淘宝镜像的 npm（原本的 npm 源下载 sass 很慢）。
npm install -g cnpm --registry=pm install node-sass --savecnpm install sass-loader --savenpm run dev
3、在 Whole.vue 页面上（ 根据需要自行安排位置即可 ）添加相对应的按钮，来触发切换风格的方法。
代码如下（这里只写出这次功能实现所需的代码，无关的代码没有写出）：
<!-- 切换主题 --><div @click="handleChangeStyle()"><el-tooltip content="切换主题" placement="bottom"><i :class="globalTheme ? 'el-icon-moon' : 'el-icon-sunny'"></i></el-tooltip></div>
这里使用存储对象localStorage来让本地浏览器存储相应的属性和属性值（如果浏览器没有清理缓存，下次进入页面会记住上次选择的样式）。
<script>import bus from "@/utils/bus";export default {data(){return{globalTheme: false,}},created() {this.globalTheme = JSON.parse(localStorage.getItem('global_theme'));bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件},methods:{handleChangeStyle(){ // 切换主题this.globalTheme = !this.globalTheme;localStorage.setItem('global_theme', this.globalTheme); // 本地存储选择的 globalThemebus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件},}}</script>
4、在整个项目的页面渲染文件 App.vue 里接收子组件通信传来的值，根据接收值的不同，对应不同的样式（ 自定义为 theme1 ）：
<template><div id="app" :class="style ? 'theme1' : ''"><router-view></router-view></div></template><script>import bus from '@/utils/bus';export default {data(){return{style: false}},created(){bus.$on('global_theme', (msg) => { // 接收子组件传来 global_theme 的值this.style = msg;});}}</script>
整体的功能实现步骤是这样的，接下来就是设定风格切换后的样式了，这就看个人需求了，往下是我自己简单写了点切换风格后需要变化的样式。
5、编写自己想要的 CSS 样式 ，放入一个类为 theme1 的 scss 文件里，
scss 文件的具体内容如下：
.theme1{/* 将自己想要换肤后变化的样式写入该处，根据自己的需要进行修改和添加 */.sidebar-el-menu:not(.el-menu--collapse) {background: #012d4b !important;}.sidebar > ul {background: #012d4b !important;}/* 左侧菜单栏样式 */.el-menu-item{color: white !important; /* 默认 black */background: #012d4b !important;}.el-menu-item, .el-submenu__title {background: #012d4b !important;}/* 页面顶部的样式 */.header {/* background-image:url("../../assets/img/main-bg1-top.jpg");background-repeat:no-repeat;background-size:100% 200%; */background-color: #001d30 !important;color: white !important;}.el-dropdown-link {color: white !important;}/* --------------- 水平一级菜单栏的样式--------------------- */.el-menu--horizontal > .el-menu-item.is-active {border-bottom: 2px solid #7FFFD4 !important; /* 默认 blue */color: #7FFFD4 !important; /* 默认 blue */}.el-menu--horizontal > .el-menu-item {background: transparent !important;color: white !important; /* 默认 black */}.el-menu--horizontal > .el-menu-item:hover {background: transparent !important;color: white !important;}/* 消息按钮颜色样式 */.el-icon-bell{color: white;}.el-icon-caret-bottom{color: white;}}
然后记得在main.js里引入样式文件（全局样式和主题样式文件）：
import './assets/css/main.css';import './assets/css/theme.scss';
最后把项目重跑下（npm run dev），重新打开页面，点击相关的按钮就实现了系统主题风格的切换了。
这篇文章只是提供一种思路，当然也存在不好的地方，局限在两种之间，若是要实现多种风格切换，就不能像这样简单地用布尔值和三元表达式来改变了。
这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！
如果觉得《Vue + ElementUI 后台管理系统实现主题风格切换》对你有帮助，请点赞、收藏，并留下你的观点哦！
