文章目录
一、概述
vue-element-admin
官方实现的原理:element-ui 2.0
版本之后所有的样式都是基于SCSS
编写的,所有的颜色都是基于几个基础颜色变量来设置的,所以就不难实现动态换肤了,只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过package.json
拿到element-ui
的版本号,根据该版本号去请求相应的样式。拿到样式之后将样色,通过正则匹配和替换,将颜色变量替换成你需要的,之后动态添加style
标签来覆盖原有的css
样式。
线上体验地址可点击【跳转】,具体效果如下所示:
二、实现
2.1、package.json
element-ui
固定版本,本人项目是使用的2.15.5
版本,如下所示:
{
"dependencies": {
"element-ui": "2.15.5"
}
}
2.2、element-variables.scss
这里无脑参考 vue-element-admin
的源码,首先现在 styles
文件夹下创建一个名为 element-variables.scss
文件,并在 main.js
中引入该文件。
/* src/styles/element-variables.scss */
/* 改变主题色变量 */
$--color-primary: #256DCB;
$--color-success: #7AC800;
$--color-danger: #EC4242;
$--color-info: #999999;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
/* 如遇到导出的变量值为 undefined 则本文件名需要改成 element-variables.module.scss */
:export {
theme: $--color-primary