uu一键换肤官网,实现一键查询

传送门：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>

优点：易于理解，快速上手开发
缺点：需要把组件中需要换颜色或图标的样式单独拎出来写，不方便维护，因此应该注意变量名语义化、多写注释