elementui+vue切换主题颜色

最新推荐文章于 2024-08-09 20:36:04 发布

原创最新推荐文章于 2024-08-09 20:36:04 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

插件专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用ElementUI的自定义主题工具进行主题颜色的修改，并通过gulp插件自动化生成不同主题的CSS文件，实现网页界面的动态换肤功能。

安装elementui的自定义主题工具

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

初始化变量文件

et -i element-variables.scss

在根目录下会产生element-variables.scss，找到这个文件，更改primary

$--color-primary: #02fd0a !default;

命令行输入et,编译完成之后在主目录下生成theme的文件夹

使用gulp-css-wrap神器

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

和element-variables.scss同级创建一个名为 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-02fd0a' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/02fd0a')) /* 存放的目录 */
})

执行gulp输出

gulp css-wrap

将theme下fonts文件夹复制到这里

util->index.js

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

想更多生成主题执行更改primary，gulpfile.js 的文件，执行gulp输出

修改main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import '../theme/index.css'
import './assets/css/theme/02abfd/index.css';
import './assets/css/theme/F540FF/index.css';
import './assets/css/theme/02fd0a/index.css';
import '../src/assets/css/theme/public.css'
Vue.use(ElementUI);

更换皮肤页

<template>
  <div class="hello">
    <el-radio-group v-model="themecolor" @change="changecoclor">
      <el-radio label="02abfd"></el-radio>
      <el-radio label="F540FF"></el-radio>
      <el-radio label="02fd0a"></el-radio>
    </el-radio-group>
    <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
    <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',
      themecolor:'',
      num:''
    }
  },
  methods:{
    changecoclor(val){
      localStorage.setItem('themecolor',JSON.stringify(val))
    },
    huoqu(){
      this.themecolor=JSON.parse(localStorage.getItem("themecolor")||'')
      if(!this.themecolor){
        localStorage.setItem('themecolor',JSON.stringify('02abfd'))
      }
        
    }
  },
  mounted () {
    this.huoqu()
    toggleClass(document.body, 'custom-' + this.themecolor);
  },
  watch: {
    themecolor: {
      handler () {
        toggleClass(document.body, 'custom-' + this.themecolor);
      }
    }
  }
}
</script>

public.css里定义需要修改的其他样式

.custom-02fd0a .el-input-number__increase,
.custom-02fd0a .el-input-number__decrease {
    background: red;
}

.custom-02abfd .el-input-number__increase,
.custom-02abfd .el-input-number__decrease {
    background: blue;
}