elementUI及vuetifyjs动态换色实践

2018-08-26 本文已影响902人 merrylmr

前言

背景：

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

可以看出，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标签内，主色系就发生了变化。