前言
在实际的项目开发需求中，我们经常能遇到动态换肤这个需求，但是到底这个功能是如何实现的呢？那么今天就来让大家学会动态换肤的实现方式。
技术栈
Vue3 Vuex ElementPlus 持久化插件
ElementPlus的动态换肤👨🎓👨🎓
我在学习这部分的时候，发现网上的做法参差不齐，有些方法过于繁琐，在这里我查看了ElementPlus官方的文档，并且也参考了其他博主的一些文章，在这里写一下自己的认知和理解。
首先是针对ElementPlus的动态换肤，这一部分我参考了ElementPlus官网的动态换肤
官网讲解了官方使用了css变量来进行颜色的替换，废话不多说，直接上代码进行演示
selectColor.vue中的核心代码：
<el-form>
<div class="flex flex-wrap">
<el-form-item
v-for="color in Object.keys(colors)"
:label="colors[color].label"
:key="color"
>
<el-color-picker
v-model="colors[color].value"
@change="changeColor($event, colors[color].key)"
:predefine="predefineColors"
></el-color-picker>
</el-form-item>
</div>
</el-form>
// element-plus主题颜色设置
const colors = reactive({
primary: {
label: "主要颜色",
value: "",
key: "--el-color-primary",
type: "element",
},
info: {
label: "次要颜色",
value: "",
key: "--el-color-info",
type: "element",
},
//...依次类推设置相应的变量
});
onMounted(() => {
setColorVar();
});
// 定义全局变量
const currentCss = getComputedStyle(document.documentElement);
// 设置主题颜色
const setColorVar = () => {
colors.primary.value = currentCss.getPropertyValue("--el-color-primary");
colors.info.value = currentCss.getPropertyValue("--el-color-info");
colors.danger.value = currentCss.getPropertyValue("--el-color-danger");
colors.warning.value = currentCss.getPropertyValue("--el-color-warning");
colors.bg.value = currentCss.getPropertyValue("--el-bg-color");
};
这里面我们使用了一个颜色选择器el-color-picker对着块不是很熟悉的同=同学可以上官网进行查看
这里面通过getComputedStyle(document.documentElement);这一段代码实现获取全局的变量，然后定义setColorVar方法，通过
getPropertyValue这个方法获取相应变量的颜色，然后设置到colors这个对象中的value值里面，在页面一开始渲染的时候就调用这个方法进行相应的颜色渲染。
更改颜色的方法，在使用ElementPlus颜色选择器中，使用setProperty方法选择颜色之后来进行相应的颜色设置，然后使用了持久化存储，这个我们接下来仔细说明。
// 更改颜色
const changeColor = (color, key) => {
if (color == null) {
ElMessage.error("颜色值不能为空");
return;
}
// 设置颜色
document.documentElement.style.setProperty(key, color);
// 持久化存储
store.commit("theme/setCustomized", colors);
};
在这个时候我们已经完成了对属于ElementPlus相关的颜色的设置，但是目前还是存在问题，主要就是在页面刷新之后，颜色还是会恢复之前的原始状态，那么这个时候我们就要使用vuex并且进行持久化的存储。
使用vuex并完成持久化的存储👨🔬👨🔬
vuex中的相关代码，这里使用了vuex中的模块化的思想，在store/module/theme.js中进行相关的设置。
export default {
namespaced: true,
state: {
// 主题颜色
mainColor: {},
globalCss,
},
mutations: {
// 设置主题颜色
setMainColor(state, { property, colorVal }) {
// 设置颜色
state.mainColor[property] = colorVal;
},
// 设置侧边栏颜色
setSideBarColor(state, { property, colorVal }) {
state.globalCss[property] = colorVal;
},
// 设置自定义颜色主题
setCustomized(state, Colors) {
Object.keys(Colors).forEach((item) => {
if (Colors[item].type == "element") {
this.commit("theme/setMainColor", {
property: Colors[item].key,
colorVal: Colors[item].value,
});
} else {
this.commit("theme/setSideBarColor", {
property: Colors[item].key,
colorVal: Colors[item].value,
});
}
});
},
},
};
其中setCustomized这个方法接收之前定义的colors对象，来进行相关的设置，首先进行判断是否为element-plus的相关设置，然后在调用setMainColor方法，将相应的颜色值进行存储，但是我们知道，如果只是进行到这一步还是不够的，因为vuex中存储的数据在进行刷新之后还是会消失，因此我们要进行持久化的存储，那么这个时候我选择的是时候相关的插件，
下载相关的持久化存储插件
npm i vuex-persistedstate
然后在store/index.js中进行相关的设置
import { createStore } from "vuex";
import theme from "./module/theme";
import getters from "./getters";
// 引入第三方插件,配置持久化
import createPersistedState from "vuex-persistedstate";
export default createStore({
getters,
modules: {
theme,
},
plugins: [
createPersistedState({
storage: window.localStorage,
key: "mainColor",
paths: ["theme"],
}),
],
});
在下载了相关的npm包之后，我们导入createPersistedState这个方法，然后在vuex中的createStore中的plugins中进行相关的配置
这个plugins是一个数组，然后在里面使用createPersistedState方法传入一个对象,进行键值对的设置，其中paths是一个数组，里面表示要持久化存储的模块。storage表示的是使用什么进行持久化的存储，这里我使用的是localStorage来及进行持久化的存储。
到现在如果我们进行页面刷新的时候，会发现还是没有达到相应的要求，这是为什么呢？其实我们会发现我们使用的setVarCss方法设置的还是element-plus默认的初始值，这里虽然进行了持久化的存储，但是相关的值没有使用，因此我又定义了相关的方法来完成这最后一步，代码如下
export default (store) => {
// 如果存在自定义的颜色
if (JSON.stringify(store.getters.mainColor) != "{}") {
Object.keys(store.getters.mainColor).forEach((key) => {
document.documentElement.style.setProperty(
key,
store.getters.mainColor[key]
);
});
}
};
这部分代码直接以函数的形式导出，然后在main.js中进行引入，传入store来完成相应的方法，这个方法其实就是将之前持久化存储的值在这里通过setProperty来进行相关的设置，以便我们之前在组件中setVarCss方法能够正确的完成。
这样我们就算是完成了持久化存储，下面我们实际的演示一下。
到这里我们就实现了对ElementPlus的动态换肤，那么我认为就是一下步骤:
- 首先我们肯定要使用ElementPlus官方的组件：el-color-picker，为此我们还准备了一个对象colors，这个对象里面存储的是每种颜色（例如primary，info等等），包含每种颜色的key和value，便于我们进行设置
- 然后我们还创建了一个changeColor方法，这个方法用了修改选中的一些颜色，并且我们还进行了持久化的存储，使用了一个持久化存储的npm包，并且进行了一些相关的配置。
- 我们进行页面渲染的核心其实就是setVarCss这个方法，这个方法写在OnMounted中，每次页面渲染的时候，就会调用这个方法，本质就是利用全局变量中存储的变量来进行渲染
- 在调用全局的css变量的时候使用
getPropertyValue这个方法，但是我们注意到我们此时调用的这个全局变量其实还是迷人值，没有利用起来vuex持久化存储的数据，那么为此我又单独创建了一个方法。并且将这个方法导出然后在main.js中进行引用 - 这个方法接收一个store参数，然后就可以获取到持久化存储的相应值。来进行相应的渲染，这样持久化存储的目的也就达到了。
非ElementPlus的动态换肤
这里我还定义了一些自定义的部分进行颜色换肤，比如我自己写的侧边栏，这里也要拥有动态换肤的功能，其实实现的思路和ElementPlus的换肤思想是类似的，我们现在colors中添加这个颜色对象
sideBarColor: {
label: "侧边栏颜色",
value: "",
key: "menuBg",
type: "unelement",
},
然后在页面初始渲染的时候我们同样也是用vuex中的颜色，注意这里我在本地也定义了css颜色变量，然后我在setVarCss这个方法中新增一个行代码如下：
colors.sideBarColor.value = store.getters.globalCss.menuBg;
这部分代码就是对侧边栏颜色的设置，以便于当颜色修改之后我们可以在选择器中也随着修改。
import globalCss from "@/style/global.module.scss";
export default{
state: {
// 主题颜色
mainColor: {},
globalCss,
},
}
我们这里导入的是scss文件，这个引入的就是我在本地定义的一些自定义的颜色变量，在scss中使用下面这种形式来到出css变量
// sidebar
$menuBg: #304156;
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
// JS 与 scss 共享变量，在 scss 中通过 :export 进行导出，在 js 中可通过 ESM 进行导入
:export {
menuBg: $menuBg;
}
由于颜色太多，这里就不一一展示，只是举例其中的一个例子，别的也是类似的。
其他的其实是类似的，比如在切换颜色之后也需要进行持久化的存储，我们在之前的vuex的方法中也写了，我们定义了两个方法，其中一个是针对ElementPlus的动态换肤来写的，另一个就是针对非ElementPlus换肤来写的。我们在colors这个对象中对每个属性中也增加了区分的方式，通过type这个方式来区分，然后vuex中的方法就会根据这个值来调用不同的方法进行存储。
最后在进行一次演示：
这样就算最后的功能完成了
总结
掌握了这部分的知识，感觉还是很有收获的，最起码这个学习的过程是很重要的。
