How to use vue+element to realize the function of dynamic skin change in background management project

这篇文章主要讲解了"怎么用vue+element实现后台管理项目动态换肤的功能"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用vue+element实现后台管理项目动态换肤的功能"吧!

有时候一个项目的主题并不能满足所有人的审美，这时候换肤功能就很友好，本项目基于vue+element实现后台管理项目的换肤功能

1.创建换肤组件

const version = require("element-ui/package.json").version; // element-ui version from node_modulesconst ORIGINAL_THEME = "#409EFF"; // default colorexport default { name: "ThemePicker", props: { default: { // 初始化主题，可由外部传入 type: String // default: '#2668b1' // default: `${localStorage.getItem("tremePackers")==null?"#C60404":localStorage.getItem("tremePackers")}` } // size: { // 初始化主题，可由外部传入 // type: String, // default: 'small' // }, }, data() { return { chalk: "", // content of theme-chalk css theme: ORIGINAL_THEME, showSuccess: true, // 是否弹出换肤成功消息 predefineColors: [ "#2668b1", "#52b493", "#429798", "#32789c", "#1944a5", "#5944bc", "#995dcd", "#ce7e5b", "#ee8b9b", "#283551" ] }; }, mounted() { this.theme = this.defaultTheme; // this.$emit('onThemeChange', this.theme) this.showSuccess = true; }, computed: { defaultTheme() { return this.$store.state.theme; } }, watch: { async theme(val, oldVal) { if (typeof val !== "string") return; 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) document .getElementsByTagName("style")[0] .insertBefore(styleTag, null); } styleTag.innerText = newStyle; }; }; const chalkHandler = getHandler("chalk", "chalk-style"); if (!this.chalk) { const url = `../../assets/style/theme/index.css`;//本地css样式地址 // const url = `./dist/index.css`;//项目打包后css地址（原文件放入public文件夹中） // 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 ); }); this.$store.commit("themColor", val);//将更换的颜色存入store this.$emit("onThemeChange", val); // 响应外部操作 //存入localStorage // localStorage.setItem('tremePackers',val); // if(this.showSuccess) { // this.$message({ // message: '换肤成功', // type: 'success' // }) // } else { // this.showSuccess = true // } } }, methods: { updateStyle(style, oldCluster, newCluster) { let newStyle = style; oldCluster.forEach((color, index) => { newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]); }); return newStyle; }, getCSSString(url, callback, variable) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, ""); callback(); } }; 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