vue less 换肤

Posted 2021-05-21 久天.

配置几套主题色，通过修改body class来实现，由于我是在组件库中使用的，以下为核心代码

switch-theme 子组件

<template>
  <div class="switch-theme">
    <el-radio-group v-model="radio" @change="switchTheme">
      <el-radio label="">经典</el-radio>
      <el-radio label="style-primary">经典蓝</el-radio>
      <el-radio label="style-violet">紫色</el-radio>
      <el-radio label="style-green">绿色</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    name: 'switchTheme',
    data() {
      return {
        radio: ''
      };
    },
    methods: {
      switchTheme(state) {
        this.radio = state
        document.body.className = state
      }
    }
  }
</script>

theme.less

// 需要修改的地方，可在下面方法中配置
@import "./common/var.less";
.changeGlobalColor(@fc: @primary,@backColor:@white){
  a, p {
    color: @fc !important;
    &:hover {
      color: @fc !important;
    }
  }
}

theme-color.less

@import "./common/var.less";
@import url(./theme.less);
//默认  经典蓝
.style-primary {
    .changeGlobalColor();          
}
//紫色
.style-violet{
    .changeGlobalColor(@violet, @violet); 
}
//绿色
.style-green{
    .changeGlobalColor(@green, @green); 
}

var.less

@violet: #6076e3;
@green: #007d5f;
@white: #fff;
@primary: #0097FE;

父组件

<switch-theme></switch-theme>

截图

 

想要了解更多可以查看LESSCSS