vue实现element-ui自定义主题色切换(简单版)

需求：通过点击图标实现了白天和黑夜的页面效果的实现，可以自定义颜色，手写，比较简单，如果需要复杂功能，根据颜色选择器实现element-ui全部的主题色切换可以看我另一篇：还在写

效果：

 1.定义个图标用于切换主题

 <!-- 切换主题 -->
          <div @click="handleChangeStyle()">
            <el-tooltip content="切换主题" placement="bottom">
              <i :class="globalTheme ? 'el-icon-moon' : 'el-icon-sunny'"></i>
            </el-tooltip>
          </div>

2.定义个全局总线，用于数据的输出和输入

在main.js加上这句话就行了

Vue.prototype.$bus=new Vue();

3.点击图标后传入数据

 this.globalTheme：默认是false

     handleChangeStyle() {
            // 切换主题
            this.globalTheme = !this.globalTheme;
           this.$bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件
        }

4.app.vue中编写

<template>
  <div id="app" :class="style ? 'theme1' : ''">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return{
      style: false
    }
  },
  created(){
    this.$bus.$on('global_theme', (msg) => {    // 接收子组件传来 global_theme 的值
      this.style = msg;
    });
  }
}
</script>

5.创建theme.scss

这里面就是你自定义的颜色，把他导入在main.js中完成

.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;
  }
}

文章到此结束，希望对你有所帮助~~