1.新建一个名为 ThemePicker
的组件
<template>
<el-color-picker
class="theme-picker"
popper-class="theme-picker-dropdown"
:predefine="[
'#256DCB',
'#409EFF',
'#1890ff',
'#304156',
'#212121',
'#11a983',
'#13c2c2',
'#6959CD',
'#f5222d',
'#F80',
]"
v-model="theme"
></el-color-picker>
</template>
<script>
const version = require("element-ui/package.json").version; // element-ui version from node_modules
const ORIGINAL_THEME = "#409EFF"; // default color
export default {
mounted() {
this.applyTheme();
},
data() {
return {
chalk: "", // content of theme-chalk css
theme: localStorage.getItem("theme") || ORIGINAL_THEME,
};
},
watch: {
theme(val, oldVal) {
if (typeof val !== "string") return;
localStorage.setItem("theme", val);
const themeCluster = this.getThemeCluster(val.replace("#", ""));
const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
console.log(themeCluster, originalCluster);
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(
ORIGINAL_THEME.replace("#", "")
);
const newStyle = this.updateStyle(
this[variable],
originalCluster,
themeCluster
);
let styleTag = document.getElementById(id);
if (!styleTag) {
styleTag = document.createElement("style");
styleTag.setAttribute("id", id);
document.head.appendChild(styleTag);
}
styleTag.innerText = newStyle;
};
};
const chalkHandler = getHandler("chalk", "chalk-style");
if (!this.chalk) {
const chalkCss = `
`;
this.chalk = chalkCss.replace(/@font-face{[^}]+}/, "");
chalkHandler();
} else {
chalkHandler();
}
const styles = [].slice
.call(document.querySelectorAll("style"))
.filter((style) => {
const text = style.innerText;
return (
new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
);
});
styles.forEach((style) => {
const { innerText } = style;
if (typeof innerText !== "string") return;
style.innerText = this.updateStyle(
innerText,
originalCluster,
themeCluster
);
});
this.$message({
message: "换肤成功",
type: "success",
});
},
},
methods: {
applyTheme() {
const themeCluster = this.getThemeCluster(this.theme.replace("#", ""));
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace("#", ""));
const styles = [].slice.call(document.querySelectorAll("style"));
styles.forEach((style) => {
const { innerText } = style;
if (typeof innerText === "string" && !/Chalk Variables/.test(innerText)) {
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
}
});
const chalkStyle = document.getElementById("chalk-style");
if (chalkStyle) {
chalkStyle.innerText = this.updateStyle(this.chalk, originalCluster, themeCluster);
}
},
updateStyle(style, oldCluster, newCluster) {
let newStyle = style;
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
});
return newStyle;
},
getCSSString(url, variable) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
resolve();
}
};
xhr.open("GET", url);
xhr.send();
});
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
if (tint === 0) {
// when primary color is in its rgb space
return [red, green, blue].join(",");
} else {
red += Math.round(tint * (255 - red));
green += Math.round(tint * (255 - green));
blue += Math.round(tint * (255 - blue));
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
return `#${red}${green}${blue}`;
}
};
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
red = Math.round((1 - shade) * red);
green = Math.round((1 - shade) * green);
blue = Math.round((1 - shade) * blue);
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
return `#${red}${green}${blue}`;
};
const clusters = [theme];
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
}
clusters.push(shadeColor(theme, 0.1));
return clusters;
},
},
};
</script>
<style scoped>
.theme-picker .el-color-picker__trigger {
vertical-align: middle;
}
.el-color-dropdown__link-btn {
display: none;
}
</style>
2.在你的导航栏引入该组件 选择颜色则会更改element的主颜色 (已经将选择的颜色存入本地,解决了页面刷新丢失的问题)