封装了两个element ui 颜色选择器,一个是本地储存(local storage)保存颜色,并不需要调取接口即可保存用户的改变的主题颜色。另外一个是改变颜色之后,刷新页面改变的颜色就会变回原来的初始值。需要哪一个看你个人选择。
本地储存颜色:
1.首先封装一个colorPicker组件
<template>
<el-color-picker
v-model="theme"
class="theme-picker"
:predefine="predefineColors"
popper-class="theme-picker-dropdown"
>
</el-color-picker>
</template>
<script>
const version = require("element-ui/package.json").version; // 版本号
const ORIGINAL_THEME = "#409EFF";
export default {
name: "colorPicker",
data() {
return {
chalk: "",
theme: ORIGINAL_THEME,
predefineColors: [
"#409EFF",
"#ff4500",
"#ff8c00",
"#ffd700",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585"
]
};
},
mounted() {
if (this.CheckIsColor(localStorage.getItem("colorPicker"))) {
this.theme = localStorage.getItem("colorPicker");
}
},
watch: {
theme(val, oldVal) {
if (typeof val !== "string") return;
localStorage.setItem("colorPicker", val);
const themeCluster = this.getThemeCluster(val.replace("#", ""));
const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
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 url = `https://unpkg.com/element-ui@${
version}/lib/theme-chalk/index.css`;
this.getCSSString(url, chalkHandler, "chalk");
} 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
);
});
/* 当颜色改变时,使用vuex储存改变的颜色值 */
this.$store.commit({
type: "getThemeColor",
color: val
});
}
},
methods: {
CheckIsColor(bgVal) {
var type = "^#[0-9a-fA-F]{6}$";
var re = new RegExp(type);
if (bgVal.match(re) == null) {
type =
// eslint-disable-next-line no-useless-escape
"^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$";
re = new RegExp(type);
if (bgVal.match(re) == null) {
return false;
} else {
return true;
}
} else {
return true;
}
},
updateStyle(style, oldCluster, newCluster) {
let newStyle = style;
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
});