Vue + ElementUI 后台管理系统实现主题风格切换

一、目的

此次写作内容是在我之前发布一篇文章的基础上进行新增的。

上一篇文章：Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客

这次要实现在页面上新增一个切换主题风格的按钮，点击后实现页面主题风格的切换功能。

二、效果图

三、具体实现步骤

1、前期准备：使用 bus 进行组件通信

在要相互通信的组件之间，引入一个新的 Vue 实例，然后分别通过调用这个实例的事件触发和监听，来实现通信和参数传递。

在 utils 文件夹下放入 bus.js 文件：

import Vue from 'vue'
const bus = new Vue()  // 使用 Event Bus
export 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=https://registry.npm.taobao.org
cnpm install node-sass --save
cnpm install sass-loader --save
npm 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);  // 本地存储选择的 globalTheme
      bus.$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），重新打开页面，点击相关的按钮就实现了系统主题风格的切换了。

这篇文章只是提供一种思路，当然也存在不好的地方，局限在两种之间，若是要实现多种风格切换，就不能像这样简单地用布尔值和三元表达式来改变了。

这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！