Vue+ElementUI实现多套主题换肤_vue多套焕肤

一、原理

本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫day theme ，一套叫night theme，night theme主题都在一个.night-theme的命名空间下，我们动态的在body上add .night-theme ， remove .night-theme。

二、实现

1、安装工具

npm i element-theme -g
1

下载官方通过的 Theme generator ，一个专门用来生成Element主题的工具。按照文档，我们生成了需要的主题。

2、安装白垩主题

# 从 npm
npm i element-theme-chalk -D

# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
1
2
3
4
5

3、初始化变量文件

主题生成工具安装成功后，如果全局安装可以在命令行里通过 et调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参数指定文件输出目录。

et -i [可以自定义变量文件]
1

4、修改变量

直接编辑 element-variables.scss 文件，例如修改主题色为红色。

$--color-primary: red;
1

5、编译主题

保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数；如果你在初始化时指定了自定义变量文件，则需要增加 -c 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 ./theme 下，你可以通过 -o 参数指定打包目录。

et
1

6、gulp-css-wrap包裹元素class

用gulp-css-wrap这个神器将这个主题的每个元素外面包裹一个class 来做命名空间

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')

var customThemeName='.custom-theme'

gulp.task('css-wrap', function() {
  return gulp.src( path.resolve('./theme/index.css'))
    .pipe(cssWrap({selector:customThemeName}))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'))
})

gulp.task('move-font', function() {
  return gulp.src(['./theme/fonts/**']).pipe(gulp.dest('dist/fonts'))
})

gulp.task('default',['css-wrap','move-font'])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

7、引入css

这样就得到了一个以.custom-theme为命名空间的自定义主题了，之后我们在项目中引入主题

//main.js
import 'assets/custom-theme/index.css'
1
2

8、换肤

我们在换肤的地方toggleClass(document.body, 'custom-theme')一直toggle body 的 class就可以了。就简单实现了动态换肤效果。

三、小结

这种模式实现换肤也是有一个弊端的，它等于把这两个主题都打包在了项目里，如果你的项目主题需要七八种，这种模式就不适合了。我们就需要动态的加载css，下面就是最简单的动态添加css的例子，当然你可以封装一下，增加成功或者失败回调，判断是否加载过改资源等等就不展开了。

var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);
le.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);
1
2
3
4
5
6
7
8
9
10