elementUI及vuetifyjs动态换色实践

4,308 阅读2分钟

前言

背景 :

1.项目中,需要通过一个后台系统操作配色,为另一个系统实现配色; 2.项目开发使用的ui是elementUI。

目的 :

使用elementUI实现系统的动态更改主题色。

功能分析

调研了vuetifyjs的主题色实现方案及elementUI官方实现的更换主题色的方案。把两者结合到一起,实现我们系统需要的配色功能。

下面分别介绍一下两者配色方案的实现:

vuetifyjs

首先,去看了它的在线主题色生成器,

image
更换颜色时候,主要是红色框出里面的css代码发生了改变。

接着,看了其实现配色的核心源码部分**,得出结论:核心css代码是动态生成的**。

代码分析:

流程如下:

第一步,初始化的时候,根据配置的主题色,生成主题色的css样式

在vue的生命周期created阶段:调用核心方法 genStyle()和applyTheme();

genStyle方法:生成一个id="vuetify-theme-stylesheet"style标签,并插入到dom结构中。

applyTheme方法:将主题色样式放到id="vuetify-theme-stylesheet"的style标签中。

image
image

可以看出,applyTheme()方法依赖“generatedStyles”,

第二步:watch了“generatedStyles”,generatedStyles一旦发生改变,则会调用applyTheme()方法,将id为"vuetify-theme-stylesheet"的style标签内容实现更换。

image

第三步:查看generatedStyles这个计算属性,可以看出其主要依赖parsedTheme这个计算属性,而发生改变。

image

parsedTheme获取的是主题色值;

当更改主题色的时候,parsedTheme发生改变; generatedStyles计算属性就也会随之改变,然后调用genBaseColor()方法(此方法主要就是生成style标签里面的内容) watch监测到“generatedStyles”发生了改变,就会调用applyTheme(),将“genBaseColor()”方法生成的css放入到style标签内,主色系就发生了变化。

image

image

看下面这个图,基本上就是其依赖关系,及发生改变时的调用

image

elementUI动态换肤

Element官网提供了自定义主题的方案,同时也提供了一个在线自定义主题的demo

下面是demo实现动态换肤的思路:

image
图片来自:github.com/ElemeFE/ele…

下载了官网的Demo之后,进行了一些优化(适合我们项目)。

主要如下: 将样式文件放到本地;只保留涉及到颜色的样式css。不需要全部的css(体力活,有点耗时)

优点:

1.不需要去请求element的样式文件;

2.第一次初始化的时候,系统就会很快的根据配色去替换调相应的颜色代码。 而不会让用户发现颜色的变化(蓝色-->绿色),采用本地的方式替换,用户看到的就是绿色。

自定义颜色Demo

github.com/merrylmr/el…

相关文档

github.com/ElemeFE/ele… panjiachen.github.io/vue-element…