vue+iview+less 实现一键换肤-蒲公英云

vue+iview+less 实现一键换肤

传送门：Less 快速入门

1. 准备两个less文件：

1.1 theme.less 用于定义控制样式的函数

.theme(
    @Background: #1D2B40,
    @Border: #000017,
){
    .header{
        background: @Background;
        border-bottom: 1px solid @Border;
    }
}

2.2 color.less 用于调用函数传值

@import url('./theme.less');
/* 黑色主题(默认主题) */
.theme_default {
    .theme()
}
/* 蓝色主题(传入要更换的颜色) */
.theme_blue{
     .theme(
        @Background: #377DFF,
        @Border: #0167DF,
    )
}

2. 在main.js导入color.less 作为全局样式：

import './less/color.less';

3.添加点击换肤的事件：

<DropdownMenu slot="list" >
    <DropdownItem @click.native="changeTheme('theme_default')">黑色风格</DropdownItem>
    <DropdownItem @click.native="changeTheme('theme_blue')">蓝色风格</DropdownItem>
</DropdownMenu>
//点击换肤事件
changeTheme(theme){ 
    //给body添加class名，并将该class保存到localstorage中
    document.body.className = theme;
    localStorage.setItem('themeColor', theme);
    //把当前主题值传到其他组件...
    //areaUtil.$emit('changeThemes', theme);
}

4. 在index.html文件里给body初始化的时候添加class：

<script> var bodyClass = localStorage.getItem('themeColor') ? localStorage.getItem('themeColor') : 'theme_default'; document.body.className = bodyClass; </script>