1. 生成Element自定义主题
参考官网自定义主题章节:https://element.eleme.cn/#/zh-CN/component/custom-theme
得到生成的主题:
2. 如果是只要应用一种主题,将文件夹放入项目中,在main.js中引入该样式文件即可。
(可以将index.css重命名,但必须保持样式文件与fonts文件夹的相对位置)
3. 如果想要实现多种主题切换,思路是将生成的每种主题css文件都包裹一个类名,js动态改变body的类名即可。
效果:
这里会使用到gulp工具
3.1 全局安装 gulp 命令行工具
npm install --global gulp-cli
(这步是为了能够在终端中使用gulp命令,如果没有安装这个,会报错gulp命令不存在、找不到)
3.2 在项目开发环境下安装依赖
npm i gulp gulp-clean-css gulp-css-wrap gulp merge-stream -D
注:这里其实安装了四个包:gulp、gulp-clean-css、 gulp-css-wrap、merge-stream。
merge-stream:在一个任务中使用多个文件来源(这里也就是对应的多个主题的css文件) 如果只有单文件则可以不安装
3.3 在项目根目录下新建gulpfile.js文件,写入代码:
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
var merge = require('merge-stream');
// 名为themeTask的任务
gulp.task('themetask', function () {
//主题一
var orange = gulp.src(path.resolve('./src/assets/css/theme/orange/index.css')) // 需要添加类名的css文件,支持正则表达式
.pipe(cssWrap({ selector: '.theme-orange' })) // 添加的类名
.pipe(cleanCSS())
.pipe(gulp.dest('./src/assets/css/theme/orange'));// 生成的css文件存放的目录
//主题一
var pink = gulp.src(path.resolve('./src/assets/css/theme/pink/index.css'))
.pipe(cssWrap({ selector: '.theme-pink' }))
.pipe(cleanCSS())
.pipe(gulp.dest('./src/assets/css/theme/pink'));
return merge(orange, pink);
})
3.4 在命令行运行gulp任务:
gulp themetask
注:这里的themetask那么就是上面定义的task后面的名字,如果名为'default'则可以省去,直接使用命令gulp
接着就会在你gulpfile.js代码中指定的存放目录生成一个:与原css文件同名、加了指定类名的css文件,如:
注意:如果你指定存放目录与原css文件目录相同,生成的文件就会将原文件直接替换掉
3.5 把生成的文件按照步骤2引入到main.js中即可,同样要注意css文件与相应的fonts文件夹相对位置保持一致
3.6 剩下的就是在js中写入你的交互逻辑,改变body的类名即可:
document.getElementsByTagName("body")[0].className = 'theme-orange';//改成相应类名