安装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;
}