vue-基于elementui换肤

生成不同的css颜色文件,每个文件内部命名前加上.custom-颜色值做命名空间。

然后app.vue里引入全部的颜色文件。

用户点击某颜色,就在body加上class:custom-00a597 
这样通过body的class改变就能实现真正使用不同的css文件。

1.将css文件里面加上特定的.XX类名 比如 

vue-基于elementui换肤

如颜色值为#00a597的css文件 ,我里面的每个选择器都加上了.custom-00a597 
颜色值为#0000ff的css文件,加上了.custom-0000ff 
怎么批量加呢? 
这里使用gulp-css-wrap这个神器 

2、gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]

vue-基于elementui换肤

1.搭建gulp环境
搭建环境在项目的代码环境中搭建。

//1.安装gulp:
npm install gulp

//2.安装gulp-clean-css
npm install gulp-clean-css

//3.安装gulp-css-wrap
npm install gulp-css-wrap

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

3.执行gulp输出
//命令行
gulp css-wrap

3、 使用命令行主题工具生成css文件

1、使用命令行主题工具生成css文件
2、 用vue-cli安装一个新项目:
3、 安装elementUI及sass-loader,node-sass
(项目中使用scss编写需要依赖的插件)

//安装elementui
npm i element-ui -S
//安装sass
npm i sass-loader node-sass -D

4、 安装elementui的自定义主题工具
//首先安装主题工具
npm i element-theme -g

//然后安装chalk主题
npm i element-theme-chalk -D

5、 初始化变量文件


et -i [可以自定义变量文件,默认为element-variables.scss]

这时根目录下会产生element-variables.scss(或自定义的文件)

6、修改变量

直接编辑 element-variables.scss 文件,例如修改主题色为自己所需要的颜色(如: 紫色(purple))

$--color-primary: purple

7、编译主题

et

编译完之后会在根目录生成theme的文件夹.

只需要引入theme/index.css即可

8、引入自定义主题

将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入

import \'../theme/index.css\'
import ElementUI from \'element-ui\'
import Vue from \'vue\'

Vue.use(ElementUI)

9、测试是否成功

<el-button type="primary">主要按钮</el-button>

4、动态切换主题

1、将修改好的不同css颜色文件放到一个文件夹

vue-基于elementui换肤

1、换肤内容

vue-基于elementui换肤

vue-基于elementui换肤

5、动态切换逻辑

当前颜色值存在vuex里。修改或拿取都通过vuex管理 

vue-基于elementui换肤

用户点击颜色值v-model绑定 

vue-基于elementui换肤

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgwpfs.html