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);
    },
  }