vue-element-admin的自定义主题切换功能实现

原本vue-element-admin的切换样式，只是换了一些按钮和其他一些基本的样式，但是项目需要不同颜色主题的版本，比如浅色模式和深色模式。

参考：https://github.com/lss5270/vue-admin-spa（vue2.0+）
实现效果：

主要实现步骤：
1.自定义主题文件blue/green/red…分别代表不同颜色的主题css文件夹，文件夹下的文件名和数量需要保持一致。

2.把src/global的文件夹实现主题css的文件的切换
注意:需要下载依赖：npm install --save vue-resource

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

import config from '../../vue.config'

import themeArray from './themeArray'

// 封装一些全局元素。如全站通用功能函数和http请求等

export const global = {
  // 静态资源路径
  // staticPath: process.env.NODE_ENV !== 'development' ? config.build.staticPath : config.dev.staticPath,
  // 切换主题函数
  changeTheme: function(themeValue) {
    // var that = this
    // console.log('切换主题颜色值：', themeValue, that.staticPath, JSON.stringify(themeArray))
    var cssArray = themeArray
    if (themeValue === 'green') {
      for (let i = 0, len = cssArray.length; i < len; i++) {
        var itemPathRemove = config.assetsDir + '/theme/' + '主题文件夹名' + '/' + cssArray[i].toLowerCase() + '.css'
        removeCss(itemPathRemove)
        var itemPath = config.assetsDir + '/theme/' + themeValue + '/' + cssArray[i].toLowerCase() + '.css'
        loadCss(itemPath)
      }
    } else {
      for (let i = 0, len = cssArray.length; i < len; i++) {
        var itemPathRemove1 = config.assetsDir + '/theme/' + '主题文件夹名' + '/' + cssArray[i].toLowerCase() + '.css'
        removeCss(itemPathRemove1)
        // for (let i = 0, len = cssArray.length; i < len; i++) {
        var itemPath1 = config.assetsDir + '/theme/' + themeValue + '/' + cssArray[i].toLowerCase() + '.css'
        loadCss(itemPath1)
        // }
      }
    }
    localStorage.setItem('themeValue', themeValue)

    function loadCss(path) {
      var head = document.getElementsByTagName('head')[0]
      var link = document.createElement('link')
      link.href = path
      link.rel = 'stylesheet'
      link.type = 'text/css'
      head.appendChild(link)
    }

    function removeCss(href) {
      // 清除动态添加的css文件
      // const links = document.getElementsByTagName('link')
      // const head = document.getElementsByTagName('head')[0]
      // const arr = []
      // if (links && links.length > 0) {
      //   for (let i = 0, len = links.length; i < len; i++) {
      //     if (links[i].href = href) {
      //       arr.push(links[i])
      //     }
      //   }
      //   for (let i = 0, len = arr.length; i < len; i++) {
      //     head.removeChild(arr[i])
      //   }
      // }
      // 清除动态添加的css文件
      // debugger
      var targetelement = 'link'
      var targetattr = 'href'
      var allsuspects = document.getElementsByTagName(targetelement)
      for (var i = allsuspects.length; i >= 0; i--) {
        if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(href) !== -1) {
          allsuspects[i].parentNode.removeChild(allsuspects[i])
        }
      }
    }
  }
}

3. mian.js 全局引入

// 路径按照自己项目的实际放置路径引入
import { global } from '../src/global/global' 
// 加载用户主题
if (localStorage.getItem('themeValue')) {
  global.changeTheme(localStorage.getItem('themeValue'))
}

4.切换弹窗设置这里
\src\layout\components\Navbar.vue文件添加切换组件

 <span @click="dialogVisible = true">切换主题</span>

弹窗：

 <!-- 换肤弹窗 -->
    <el-dialog title="更改主题颜色" :visible.sync="dialogVisible">
      <el-form class="small-space" label-position="left" label-width="130px" style="width: 400px; margin-left:50px;">

        <el-form-item label="请选择主题模式：" prop="resource">
          <el-radio-group v-model="themeValue">
            <el-radio label="blue">浅色主题</el-radio>
            <el-radio label="green">深色模式</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChangeTheme">确 定</el-button>
      </div>
    </el-dialog>

注意：
vue3.0+版本样式文件必须放在public下引用，并且不同主题的文件名和文件必须一致；
附上代码链接： https://gitee.com/Chen_Pin/vue-admin-element-theme