vue項目的換膚功能

踩坑：

看到網上一個辦法是在static中寫好不同的樣式文件。當按鈕點擊切換的時候，調用方法，去動態加載css文件。

export function getTheme(themeId){
    return require("../../static/css/theme/" + themeId + "/index.scss");
}

但是！這樣切換的時候，後面的樣式會覆蓋前面的樣式！皮膚切換不回來了！

進入正題：

步驟一、寫樣式。

在styles文件夾中添加theme.scss，在裏面寫好不同的主題風格。我這邊是.lightMode和.darkMode

步驟二、引入theme.scss （也可以直接將theme.scss引入到main.js）

@import './theme.scss'; //引入到index.scss這個全局樣式中

import '@/styles/index.scss' // 在main.js中引入index.scss全局樣式

步驟三、layout頁面

最外層包裹上樣式，獲取子組件按鈕切換的值的回傳

用computed監聽themeObj，通過themeObj中的isNightFlag動態獲取樣式。

methods中，寫上changeTheme方法，通過子組件中的切換按鈕傳回來的isNight，去更改isNightFlag的數值。寫入cookies，防止每次刷新的時候皮膚恢復成默認樣式。

created中，每次重新加載頁面的時候，通過cookies去判斷當前已經選擇的皮膚主題。

步驟四、子組件頁面

子組件傳遞給父組件當前的皮膚選擇，並且要注意當刷新之後的switch的皮膚選擇狀態（要從cookie中獲取）。

<el-switch
  v-model="isNightTheme"
  active-text="夜間模式"
    active-color="#1062b5"
  inactive-color="#a0cbf6"
  @change="changeTheme">
</el-switch>

  data (){
    return{
      isNightTheme:false
    }
  },
  created(){
    //獲取switch的當前狀態
    Cookies.get('modeStatus') == 1 ? this.isNightTheme = true : this.isNightTheme = false
  },
  methods:{
    changeTheme(){
      this.$emit('themeClick',this.isNightTheme);
    },
  }