vue+element如何一键换肤和保存换肤

因为有人问我如何一键换肤，我就随手做个案例，因为随手写的，里面命名就很随意了，但是不影响阅读。

1：assets目录下建立一个theme.scss

代码如下：

.black{
  .alldiv{
    background-color: #2A2B43;
    width: 100px;
    height: 100px;
    .header{
      color: #00c0db;
    }
  }
}

.light{
  .alldiv{
    background-color: #00ff00;
    width: 100px;
    height: 100px;
    .header{
      color: #6EBCFF;
    }
  }
}

.red{
  .alldiv{
    background-color: red;
    width: 100px;
    height: 100px;
    .header{
      color: #ffffff;
    }
  }
}
直接把上面代码复制粘贴即可。

2：然后在main.js里引入

import "./assets/theme.scss"

3：然后随意建一个vue组件

<template>
  <div class="hospitalManage whiteBg addEdit">
   <div class="top">
     <el-row>
       <el-button type="primary" @click="changecolor('black')">主要按钮</el-button>
       <el-button type="success" @click="changecolor('light')">成功按钮</el-button>
       <el-button type="info" @click="changecolor('red')">信息按钮</el-button>
       <el-button type="warning" @click="savedata">保存</el-button>
       <!--<el-button type="danger">危险按钮</el-button>-->
     </el-row>
   </div>


    <div class="botton">
      <div id="test">
          <div class="alldiv">
            <div class="header">45435345</div>
          </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default{
    components: {
    },
    data () {
      return {
          newcolor:'black',
      }
    },
    created() {

    },
    mounted: function () {
      var mycolor = JSON.parse(localStorage.getItem("userInfo"));
      if (!mycolor && typeof(mycolor)!="undefined" && mycolor!=0){
        document.getElementById('test').setAttribute('class','black');
      }else{
        document.getElementById('test').setAttribute('class',mycolor.color);
      }

    },
    methods: {
      changecolor(e){
        document.getElementById('test').setAttribute('class',e);
        this.newcolor=e;
      },
      savedata(){
        var obj = {"color":this.newcolor};
        localStorage.setItem("userInfo",JSON.stringify(obj));
      }
    },

  }
</script>
<style lang="scss" >
.top{
  padding: 20px;
}
  .botton{
    width: 100%;
    height: 200px;
    border: 1px solid #1f5ed1;
  }
  #test{
    width: 500px;
    height: 180px;
    border: 1px solid #1f5ed1;
    padding: 5px;
  }
</style>

又是复制粘贴，嘻嘻，简单吧，你可以直接拿去改改，然后在你的项目中添加这个一键换肤和保存换肤的功能。这是我想到的最简单的一键换肤写法了，其他人的写法太复杂，虽然可以实现，我看的头疼。只要功能实现，代码当然是越简单越好啦！