Vue中使用Scss實現(xiàn)配置、切換主題方式

更新時間：2024年03月11日 14:47:04 作者：明天也要努力

這篇文章主要介紹了Vue中使用Scss實現(xiàn)配置、切換主題方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

樣式文件目錄介紹

本項目中的公共樣式文件均位于 src/assets/css 目錄下，其中 index.scss是總的樣式文件的匯總入口

common.scss 是供全局使用的一些基本樣式(常量）

_theme.scss
_handle.scss 兩個文件是進行主題顏色配置的文件

如下圖：

將 index.scss 在 main.js 文件中引入即可全局使用。

主題 scss 文件配置

src/assets/css 目錄下的 _themes.scss，里面可配置不同的主題配色方案

本文配置了兩個主題顏色：light、dark

@import './common.scss';
$themes: (
  light: (
    bg-color: $white,
    font-color: $regularBlack,
    link-color: $grey,
    icon-home: url('~@/assets/img/icon/lightHomeIcon.svg'),
    icon-filter: url('~@/assets/img/icon/lightFilter.png'),
  ),
  dark: (
    bg-color: $black,
    font-color: $white,
    link-color: $blue,
    icon-home: url('~@/assets/img/icon/darkHomeIcon.svg'),
    icon-filter: url('~@/assets/img/icon/darkFilter.png'),
  )
)

src/assets/css 目錄下的 _handle.scss 用來操作上述 _themes.scss 中 $theme 的變量

_handle.scss 文件內容：

@import "./_themes.scss";

// 從主題色map中取出對應顏色
@function themed($key) {
  @return map-get($theme-map, $key);
}

// 切換主題時 獲取不同的主題色值
@mixin themeify {
  @each $theme-name,$theme-map in $themes {
    // !global 把局部變量強升為全局變量
    $theme-map: $theme-map !global;
    // 判斷html的data-theme的屬性值  #{}是sass的插值表達式
    // & sass嵌套里的父容器標識   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}


// 獲取背景顏色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}

// 獲取背景圖片
@mixin background_image($color) {
  @include themeify {
    background-image: themed($color) !important;
  }
}

// 獲取圖片
@mixin content($color) {
  @include themeify {
    content: themed($color) !important;
  }
}

// 獲取字體顏色
@mixin font_color($color) {
  @include themeify {
    color: themed($color) !important;
  }
}

// 獲取邊框顏色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color) !important;
  }
}

組件中使用

樣式文件都配置完成了，怎么設置當前需要使用的主題呢？

此處具體情況具體分析，在合適的頁面或位置寫入即可，本文是寫在了 App.vue 項目入口文件中，通過

window.document.documentElement.setAttribute();

方法傳入當前想要使用的主題。本文默認傳入的 ‘light’，則 vue 頁面中使用的即為 _theme.scss 中的 light 對象下配置好的顏色或者其他屬性；

設置其他主題色（如：dark、blue）同理，前提是 _theme.scss 文件中存在配置好的對應主題樣式；

// App.vue
<template>
  <div id="app">
    <div class="fun">
      <el-switch
        v-model="switchVal"
        active-color="#2c2c2c"
        inactive-color="#e8e4e4"
        @change="switchChange">
      </el-switch>
    </div>
    <el-menu 
      :default-active="activeIndex" 
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b" 
      @select="handleSelect">
      <el-menu-item index="/home">
        主頁
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">圖表</template>
        <el-menu-item index="/charts">折線圖</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">表格</template>
        <el-menu-item index="/table">普通表格</el-menu-item>
        <el-menu-item index="/dynamicTable">動態(tài)表格</el-menu-item>
      </el-submenu>
    </el-menu>

    <router-view/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      switchVal: false,
      activeIndex: '/home',
    }
  },
  methods:{
    switchChange(val){
      if(val){
        window.document.documentElement.setAttribute('data-theme', "dark");
      }else{
        window.document.documentElement.setAttribute('data-theme', "light");
      }
    },
    handleSelect(key, keyPath) {
      this.$router.push(key)
    }
  },
  mounted(){
    this.switchChange(this.switchVal);
  }
}
</script>

<style lang="scss">
// 引入主題配置文件
@import "@/assets/css/_handle.scss";
#app {
  height: 100vh;
  text-align: center;
  @include background_color('bg-color');
  // background_color 為 _handle.scss 文件中配置好的屬性，傳入'bg-color'即可通過當前的主題配置在 _theme.scss 文件中取色。 
  .fun{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    box-sizing: border-box;
  }
}
</style>

home.vue 中同理

<style lang="scss" scoped>
@import "@/assets/css/_handle.scss";
.home{
  text-align: center;
  @include font_color('font-color');
  .homeIcon{
    width: 14px;
    height: 14px;
    margin-right: 5px;
    display: inline-block;
    background-size: 100% 100%;
    @include background_image('icon-home');
  }
  a{
    @include font_color('link-color');
  }
}
</style>