vue less 换肤

川长思鸟来 2022-10-20 13:51 223阅读 0赞

> 配置几套主题色，通过修改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>

截图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1][]

想要了解更多可以查看[LESSCSS][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20221020/15c863d7ecf24245af0e7cc93d51c5a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1]: /images/20221020/79b859c2e5b14ac9aa5d01645c912d7b.png
[LESSCSS]: http://www.1024i.com/demo/less/index.html