vue+element 换肤功能

1.首先建深色和浅色两个主题样式变量样式表，样式表名和按钮中传入的值一样，本例中起名为default.scss和dark.scss
2.在data中定义主题变量名 zTheme:‘defalut’，默认引用defalut.scss,
在点击按钮时切换引用的样式表，达到换肤效果
3.dom中写入主题切换按钮

 /****更换主题按钮*****/
<div class="set-theme">
   <el-button type="text" @click="setTheme('dark')">深色主题</el-button>  &emsp; &emsp;||
   <el-button  type="text" @click="setTheme('default')">浅色主题</el-button>
</div>

2.setTheme 方法逻辑处理

 /****更换主题方法*****/
      setTheme(themeName){
        this.zTheme = themeName
        localStorage.setItem('zTheme',themeName)
        require(`@/assets/styles/theme/${this.zTheme}.scss`)
        location.reload();
        /*this.$parent.$forceUpdate()
         this.$router.go(0);*/
      },

3.页面加载时调用存储的theme主题

 created() {
     const route = this.$route; // 获取当前路由信息
      if (route.path != '/indexs') {  //此路由为三维系统
        require(`@/assets/styles/index.scss`)
      }else {
        return '';
      }  //因本项目是二维三维系统在一个项目中，为了不影响三维样式，加此代码，通过判断，只有二维时才加载index.scss
      /***皮肤***/
      let theme=localStorage.getItem('zTheme')
      if(theme){
        this.zTheme = theme
        require(`@/assets/styles/theme/${this.zTheme}.scss`)
      }