基于element ui的换肤功能

由于公司邮件系统是基于element ui写的，现在需求要写一个换肤功能，经过多次百度参考，予以完成，记录下来以供参考。

基于element ui 的换肤功能

前言：
我们要对css文件的所有选择器添加命名空间
如我们给所有的加上.custom-1b1e24
原css文件：
.header{height:100px;}
.content{color:#fff;}
=>输出
.custom-1b1e24 .header{height:100px;}
.custom-1b1e24 .content{color:#fff;}
原文链接：https://blog.csdn.net/young_Emily/article/details/78591261
其实就是通过css前缀区别不同的css文件，然后动态变换不同的css样式。

1.Vue的elementUI实现自定义主题

1.1 //首先安装主题工具
    npm i element-theme -g
    //然后安装chalk主题
    npm i element-theme-chalk -D
1.2 //初始化变量文件
	et -i [可以自定义变量文件，默认为element-variables.scss]
	> ✔ Generator variables file
    其实就是生成一个element当前样式的scss文件,用来编辑
	此次我们简单的对$--color-primary: pink !default;进行修改
1.3 et 进行编译，此时就会生成一个新的theme文件夹，里边就是修改过的element-variables.scss文件,
	在main.js引入即可
	//这样只是简单实现了对elment默认主题进行修改,但是我们需要多套换肤这时候就需要gulp css-wrap通过编译不同前缀的css样式来实现。

// 效果如图

2.搭建gulp环境

//1.安装gulp：
npm install  gulp

//2.安装gulp-clean-css
npm install gulp-clean-css

//3.安装gulp-css-wrap
npm install gulp-css-wrap

2.在项目根目录创建一个gulpfile.js文件

// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
    /* 找需要添加命名空间的css文件，支持正则表达式 */
        .pipe(cssWrap({
            selector: '.custom-1b1e24' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/1b1e24')) /* 存放的目录 */
})

3.直接通过gulp css-wrap 编译即可生成1b1e24文件

具体流程细节：

1.首先修改element-variables.scss文件，修改自己想要的
2.通过et编译生成theme中新的index.css文件
3.通过gulp css-wrap来编译生成不同的前缀css，然后在main.js中引入

4.以为例
4.1:首先在vuex中state定义默认主题色,mutations中修改主题body色

4.2:v-model绑定themecolor
4.3:3. 刚开始载入的时候主题色是vuex的默认值
watch颜色值的改变，一旦改变就调用vuex的函数

    themecolor: {
      handler() {
        toggleClass(document.body, "custom-" + this.themecolor);
         console.log(this.themecolor);
        console.log(document.body);
      }
    }
    在computed中计算同步到vuex中
        themecolor: {
      get() {
        return this.$store.state.themecolor;
      },
      set(val) {
        this.$store.commit("setThemeColor", val);
        console.log(val);
      }
    }
    在mounted钩子函数中定义:
	 mounted() {
        toggleClass(document.body, "custom-" + this.themecolor);
        console.log(this.themecolor);
  		},
  	如图所示:

  ps:	toggle是外部定义的js文件
    // toggle.js
    /**
     * created by yxy 2019/8/16 
     * 事件函数
     */
    //换肤加class函数
    export function toggleClass(element, className) {
        if (!element || !className) {
          return
        }
        element.className = className;
    }
这样就算完成了，点击radio的时候，会动态添加不同的样式，切换主题了。刚写博客勿喷，欢迎提意见。