vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换

vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换

参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍，加上自己的一些理解

思路：通过自己上一篇博客https://www.cnblogs.com/aidixie/p/10309862.html做出多个不同的自定义主题，在不通的主体的css样式前加上不同的class名，在页面跟换不同肤色时，通过改变body上的calss来添加不同的样式。

一、elementui自定义主题更换皮肤

1.1、给不通的主题添加不同类名

　　在src/assets/下创建theme文件夹，放入不同主题

　　

　　为不同主题中的index.css的每个选择器都前面加上class，例如在00ff22文件夹下的index.css下的每一选择前前面加上custom-00ff22类名（备注，00ff22文件夹有许多css文件，index.css应该包含其他css文件的全部样式。参考博客里没有相关的介绍，搞了好久才发现这个问题。）

　　添加方法：gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]

　　

　　其他主题都这样添加相应的类名。

1.2、app.vue里引入全部的颜色文件 

　　在app.vue一次性全部引入各个主题

　　

1.3、切换皮肤方法

　　在src添加文件夹utils,再在里面添加index.js，里面是换肤函数

//换肤加class函数
export function toggleClass (element, className) {
    if (!element || !className) {
      return
    }
    element.className = className
}

　　在theme.vue

<template>
  <div class="hello">
    <el-radio-group v-model="themeValue" @change='changeTheme'>
      <el-radio :label="'