Vue + less 如何实现切换皮肤功能 精简版

本篇只讲核心！本篇只讲核心！本篇只讲核心！
项目使用vue-cli+element搭建，皮肤控制部分使用饿了么的颜色选择器。部分无关紧要的数据已忽略，上代码：

父组件 home.vue：

<template>   
            <el-color-picker
              size="mini"
              v-model="color"
              :predefine="predefineColors"
            >
            </el-color-picker>
            <router-view :colors="color"></router-view> //colors为子组件接收参数
</template>  
<script>
  import hscard from './hscard/hscard'
   export default {
      name: "home",
      components:{
        hscard,
      },
      data(){
              return {
                color:'',
                predefineColors: [  
                  '#fff',            //白昼主题
                  '#101a23',         //黑夜主题
                ]
              }
      },
      created() {
        this.color='#101A23';      //初始化默认为黑夜主题
      },
    }
</script>

下面开始定义主题的less函数
新建theme.less:

.theme(@backcolor1:#06141e,@backcolor2:#101a23,@thcolor:#1d2f3e,@trcolor:#0d2031,@fcolor:#fff){
   //theme函数中定义不同的颜色参数
  .tab1 /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{  // /deep/为深度选择器，作用与 >>> 相同
    background-color:@backcolor2;            //TAB切换头的选中样式颜色更改
  }
  .tab1 /deep/ .el-tabs__header, .is-top{
    background-color:@backcolor2;            //TAB切换头的默认样式颜色更改
  }
  .tab1 /deep/.el-tabs--border-card>.el-tabs__content{
    background-color:@backcolor2;
  }
  .slist /deep/input{                       //input的默认样式颜色更改
    background-color: @backcolor2;
  }
  .tab1 /deep/.el-table th{                  //表格的默认样式颜色更改
    background-color: @thcolor ;
    border-color:#ccc;
  }
  .tab1 /deep/.el-table__row{
    background-color:@trcolor;
  }
  .ebutton{                                //按钮的默认样式颜色更改
    background-color: @backcolor2;
  }
  .zhi{
    color:@fcolor;                         //字体颜色修改
  }
  .bottom{
    background-color: @backcolor1;
  }
}

新建color.less:
注意需要引入less函数的文件，最后使用的是这个文件

@import './theme.less';  //引入主题函数
.theme101A23{   //这里为了契合子组件中calss名字，起名比较粗暴
  .theme()         //调用函数
}
.themeFFFFFF{
  .theme(#f1f2f7,#fff,#eee,#fff,#000)   //重点！！！不同主题间只需要在定义好的函数内传入不同颜色即可
}

子组件 hscard.vue：

<template>
  <div id="bbottom" class="">  //设置一个最外层控制class从而改变每套皮肤对应的css
    <div class="bottom">
      <div class="tab1">
        <el-tabs type="border-card">
          <el-tab-pane label="我的卡列表">
            <div class="slist">
              <div class="sl">
                <el-select v-model="value" placeholder="请选择运营商">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
                <div class="rl">
                  <el-button class="ebutton">查询</el-button>
                </div>
            </div> 
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                >
                </el-table-column>
              </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
      name: "hscard",
      props:{
        colors:String   //接收父组件传来的参数
      },
      data() {
        return {
          ...
          colorss:''
        }
      },
      methods: {
        ab(val){         //在添加的最外层div上增加/改变class，从而改变皮肤
          document.getElementById('bbottom').className='theme'+val.slice(1,8);   
        }
      },
      created(){
        this.colorss=this.colors;        //页面初始化时给一个初始值
      },
      mounted(){                         //每次进入该页面时都会给最外层div赋正确的值，确保父子组件间的值不一致
        document.getElementById('bbottom').className='theme'+this.colorss.slice(1,8);
      },
      watch:{
        colors(val){         //监控父组件传来的值，变化时执行ab函数
          this.colorss=val;
          this.ab(val);
        },
      }
    }
</script>
<style lang="less">
  @import "../../../static/css/color.less";  //记得引入主题less文件，不然白写
</style>

大功告成！