vue element-ui vuex实现皮肤切换

1.安装sass

 npm install --save-dev sass-loader
 npm install --save-dev node-sass

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

3.安装elementui的自定义主题工具

npm i element-theme -g
npm i element-theme-chalk -D

4.初始化变量文件

et -i element-variables.scss

5.这时根目录下会产生element-variables.scss

vue element-ui vuex实现皮肤切换

6.编译主题

更改primary的值，命令行输入et

et

7.编译完成之后在主目录下生成theme的文件夹（此文件下的fonts以后有用）

vue element-ui vuex实现皮肤切换

8.在main.js的入口文件中引入

import '../theme/index.css'

9.使用gulp-css-wrap神器

npm install  gulp
npm install gulp-clean-css
npm install gulp-css-wrap

10.在项目根目录下创建一个名为 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-ffe400' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/ffe400')) /* 存放的目录 */
})

custom-ffe400中的ffe400即为刚才生成自定义主题时的颜色

11.执行gulp输出

gulp css-wrap

如果没有全局安装gulp，需要全局安装gulp

npm i -g gulp

12.生成theme文件夹下的主题名称

vue element-ui vuex实现皮肤切换

此时文件夹下没有fonts文件夹，把第7不中生成主题时生成的fonts复制到此处即可

13.建立store文件存储主题状态

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)

export default new vuex.Store({
    state:{
        themecolor:'000'//默认为20a0ff
    },
    modules: {

    },
    mutations: {
        setThemeColor(state, curcolor){
            this.state.themecolor = curcolor
        }
    }
})

14.在main.js入口文件中引用

import store from './store'
import 'element-ui/lib/theme-chalk/index.css'
import '../theme/index.css'
import './assets/css/theme/000/index.css';

15.在皮肤切换页面

<template>
  <div class="hello">
    <el-radio-group v-model="themecolor">
      <el-radio label="000"></el-radio>
      <el-radio label="ffe400"></el-radio>
    </el-radio-group>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

<script>
import { toggleClass } from "../utils/index.js";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    toggleClass(document.body, 'custom-' + this.themecolor);
    let curcolor = this.$store.state.themecolor;
    this.classH2 = 'custome-' + curcolor;
  },
  computed: {
    themecolor: {
      get () {
        return this.$store.state.themecolor;
      },
      set (val) {
        this.$store.commit('setThemeColor', val)
      }
    }
  },
  watch: {
    themecolor: {
      handler () {
        toggleClass(document.body, 'custom-' + this.themecolor);
      }
    }
  }
}
</script>

16.util->index.js

export function toggleClass(element, className) {
    if (!element || !className) {
      return;
    }
    element.className = className;
}

17.想做多套主题可以从第5步重新开始生成主题来完成。

文章借鉴https://blog.csdn.net/youlinaixu/article/details/83447527

vue element-ui vuex实现皮肤切换

相关推荐