Vue は element-ui カスタムテーマの色の切り替えを実装します (簡易バージョン)

要件: アイコンをクリックすると、昼と夜のページ効果を実現できます。比較的シンプルな色、手書き文字をカスタマイズできます。複雑な機能が必要な場合は、要素 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.テーマ.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;
  }
}

これで記事は終わりです、お役に立てば幸いです~~