赞
踩
前言:
这篇文章记录换肤的两个方面:
1.基于elementui这个ui框架的换肤
2.在vue项目里自己写的内容的换肤
所用知识:
vue , elementui , vuex , sass , gulp-css-wrap
首行祭图:
源码地址: https://github.com/EmilyYoung71415/vue-admin-elementui
思路在此:
改变原有的elementui主题:
安装elementui的自定义主题工具,然后初始化变量文件,得到elementui的scss文件,我们修改颜色就修改他的scss文件,然后编译scss文件得到css文件,我们引用修改好了的css文件[实现覆盖elementui的css文件]即可实现换肤。
至于动态换肤:
用上述方法生成不同主题[颜色值]的css文件后,我们怎么实现动态切换呢?
我的办法是:
1.将css文件里面加上特定的.XX类名 比如
如颜色值为#00a597的css文件 ,我里面的每个选择器都加上了.custom-00a597
颜色值为#0000ff的css文件,加上了.custom-0000ff
怎么批量加呢?
这里使用gulp-css-wrap这个神器
具体细节请见另一篇博文:gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
或者官方文档:gulp
下面假装你已经有了增加命名空间的各个主题css文件
2 app.vue里引入全部的颜色文件
[当然也可以按需引入,动态的加载css]
- //一个简单的动态加载css的栗子
- var head = document.getElementsByTagName('HEAD').item(0);
- var style = document.createElement('link');
- style.href = 'style.css';
- style.rel = 'stylesheet';
- style.type = 'text/css';
- head.appendChild(style);
这里我简单粗暴地一次性完全载入:
3 用户点击某颜色,就在body加上class:custom-00a597
//类似于document.body.className = ‘custom-00a597’
思路大概如上,具体的细节如下:
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求
Element官网上也提供了自定义主题的方案
同时也提供了一个在线自定义主题的demo
按照官方文档,我们可以有两种办法实现自定义换肤。
一.第一种方法:使用命令行主题工具
二.第二种方法: 直接修改element样式变量[前提是项目中使用scss编写]
现在我做的这个项目用的是第一种,因为第一种可以生成css文件,我们要在生成的css前面加各个类名。
(项目中使用scss编写需要依赖的插件)
- //安装elementui
- npm i element-ui -S
- //安装sass
- npm i sass-loader node-sass -D
- //首先安装主题工具
- npm i element-theme -g
- //然后安装chalk主题
- npm i element-theme-chalk -D
- et -i [可以自定义变量文件,默认为element-variables.scss]
-
- > ✔ Generator variables file
这时根目录下会产生element-variables.scss(或自定义的文件),大致如下:
- $--color-primary: #409EFF !default;
- $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
- $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
- $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
- $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
- $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
- $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
- $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
- $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
- $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-
- $--color-success: #67c23a !default;
- $--color-warning: #eb9e05 !default;
- $--color-danger: #fa5555 !default;
- $--color-info: #878d99 !default;
-
- ...
code is cheap ,show me the “截图 ”
直接编辑 element-variables.scss 文件,例如修改主题色为自己所需要的颜色(如: 紫色(purple))
$--color-primary: purple;
- et
-
- > ✔ build theme font
- > ✔ build element theme
编译完之后会在根目录生成theme的文件夹
我们只需要引入theme/index.css即可
最后一步,将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入
- import '../theme/index.css'
- import ElementUI from 'element-ui'
- import Vue from 'vue'
-
- Vue.use(ElementUI)
- <div>
- <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>
以上便是完成了第一步生成不同的css颜色文件。
然后我们要在不同的css文件里扩展命令空间
方法:使用gulp-css-wrap神器
具体使用见另一篇博文:gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
打广告X2 【逃
这里让我们快进到已经生成好的那一步[就像美食节目做菜一秒快进到熟的感觉]
我下面的common.scss是用于自己写的内容的换肤。这个之后再讲
2.用户点击颜色值v-model绑定
即是对应页面的这里:
3. 刚开始载入的时候主题色是vuex的默认值
watch颜色值的改变,一旦改变就调用vuex的函数
思路:
1.与生成各个颜色不同的css文件类似,我们对应不同的主题定义不同的css,只不过可以用sass解决。
mixi.scss 定义的五个主题颜色
common.scss
2. app.vue 引入common.scss
3.然后同样的动态切换class名字
参考链接:
前言:
这篇文章记录换肤的两个方面:
1.基于elementui这个ui框架的换肤
2.在vue项目里自己写的内容的换肤
所用知识:
vue , elementui , vuex , sass , gulp-css-wrap
首行祭图:
源码地址: https://github.com/EmilyYoung71415/vue-admin-elementui
思路在此:
改变原有的elementui主题:
安装elementui的自定义主题工具,然后初始化变量文件,得到elementui的scss文件,我们修改颜色就修改他的scss文件,然后编译scss文件得到css文件,我们引用修改好了的css文件[实现覆盖elementui的css文件]即可实现换肤。
至于动态换肤:
用上述方法生成不同主题[颜色值]的css文件后,我们怎么实现动态切换呢?
我的办法是:
1.将css文件里面加上特定的.XX类名 比如
如颜色值为#00a597的css文件 ,我里面的每个选择器都加上了.custom-00a597
颜色值为#0000ff的css文件,加上了.custom-0000ff
怎么批量加呢?
这里使用gulp-css-wrap这个神器
具体细节请见另一篇博文:gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
或者官方文档:gulp
下面假装你已经有了增加命名空间的各个主题css文件
2 app.vue里引入全部的颜色文件
[当然也可以按需引入,动态的加载css]
- //一个简单的动态加载css的栗子
- var head = document.getElementsByTagName('HEAD').item(0);
- var style = document.createElement('link');
- style.href = 'style.css';
- style.rel = 'stylesheet';
- style.type = 'text/css';
- head.appendChild(style);
这里我简单粗暴地一次性完全载入:
3 用户点击某颜色,就在body加上class:custom-00a597
//类似于document.body.className = ‘custom-00a597’
思路大概如上,具体的细节如下:
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求
Element官网上也提供了自定义主题的方案
同时也提供了一个在线自定义主题的demo
按照官方文档,我们可以有两种办法实现自定义换肤。
一.第一种方法:使用命令行主题工具
二.第二种方法: 直接修改element样式变量[前提是项目中使用scss编写]
现在我做的这个项目用的是第一种,因为第一种可以生成css文件,我们要在生成的css前面加各个类名。
(项目中使用scss编写需要依赖的插件)
- //安装elementui
- npm i element-ui -S
- //安装sass
- npm i sass-loader node-sass -D
- //首先安装主题工具
- npm i element-theme -g
- //然后安装chalk主题
- npm i element-theme-chalk -D
- et -i [可以自定义变量文件,默认为element-variables.scss]
-
- > ✔ Generator variables file
这时根目录下会产生element-variables.scss(或自定义的文件),大致如下:
- $--color-primary: #409EFF !default;
- $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
- $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
- $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
- $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
- $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
- $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
- $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
- $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
- $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-
- $--color-success: #67c23a !default;
- $--color-warning: #eb9e05 !default;
- $--color-danger: #fa5555 !default;
- $--color-info: #878d99 !default;
-
- ...
code is cheap ,show me the “截图 ”
直接编辑 element-variables.scss 文件,例如修改主题色为自己所需要的颜色(如: 紫色(purple))
$--color-primary: purple;
- et
-
- > ✔ build theme font
- > ✔ build element theme
编译完之后会在根目录生成theme的文件夹
我们只需要引入theme/index.css即可
最后一步,将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入
- import '../theme/index.css'
- import ElementUI from 'element-ui'
- import Vue from 'vue'
-
- Vue.use(ElementUI)
- <div>
- <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>
以上便是完成了第一步生成不同的css颜色文件。
然后我们要在不同的css文件里扩展命令空间
方法:使用gulp-css-wrap神器
具体使用见另一篇博文:gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
打广告X2 【逃
这里让我们快进到已经生成好的那一步[就像美食节目做菜一秒快进到熟的感觉]
我下面的common.scss是用于自己写的内容的换肤。这个之后再讲
2.用户点击颜色值v-model绑定
即是对应页面的这里:
3. 刚开始载入的时候主题色是vuex的默认值
watch颜色值的改变,一旦改变就调用vuex的函数
思路:
1.与生成各个颜色不同的css文件类似,我们对应不同的主题定义不同的css,只不过可以用sass解决。
mixi.scss 定义的五个主题颜色
common.scss
2. app.vue 引入common.scss
3.然后同样的动态切换class名字
参考链接:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。