vue+element实现动态换肤功能

约定不等于承诺〃 2023-02-24 03:47 105阅读 0赞

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

1.创建换肤组件

  1. <template>
  2.   <el-color-picker
  3.     class="theme-picker"
  4.     popper-class="theme-picker-dropdown"
  5.     v-model="theme"
  6.     :predefine="predefineColors"
  7.   ></el-color-picker>
  8. </template>
  10. <script>
  11. const version = require("element-ui/package.json").version; // element-ui version from node_modules
  12. const ORIGINAL_THEME = "#409EFF"; // default color
  13. export default {
  14.   name: "ThemePicker",
  15.   props: {
  16.     default: {
  17.       // 初始化主题，可由外部传入
  18.       type: String
  19.       // default: '#2668b1'
  20.       // default: `${localStorage.getItem("tremePackers")==null?"#C60404":localStorage.getItem("tremePackers")}`
  21.     }
  22.     // size: { // 初始化主题，可由外部传入
  23.     //   type: String,
  24.     //   default: 'small'
  25.     // },
  26.   },
  27.   data() {
  28.     return {
  29.       chalk: "", // content of theme-chalk css
  30.       theme: ORIGINAL_THEME,
  31.       showSuccess: true, // 是否弹出换肤成功消息
  32.       predefineColors: [
  33.         "#2668b1",
  34.         "#52b493",
  35.         "#429798",
  36.         "#32789c",
  37.         "#1944a5",
  38.         "#5944bc",
  39.         "#995dcd",
  40.         "#ce7e5b",
  41.         "#ee8b9b",
  42.         "#283551"
  43.       ]
  44.     };
  45.   },
  46.   mounted() {
  47.     this.theme = this.defaultTheme;
  48.     // this.$emit('onThemeChange', this.theme)
  49.     this.showSuccess = true;
  50.   },
  51.   computed: {
  52.     defaultTheme() {
  53.       return this.$store.state.theme;
  54.     }
  55.   },
  56.   watch: {
  57.     async theme(val, oldVal) {
  58.           if (typeof val !== "string") return;
  59.           const themeCluster = this.getThemeCluster(val.replace("#", ""));
  60.           const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
  61.           const getHandler = (variable, id) => {
  62.             return () => {
  63.               const originalCluster = this.getThemeCluster(
  64.                 ORIGINAL_THEME.replace("#", "")
  65.               );
  66.               const newStyle = this.updateStyle(
  67.                 this[variable],
  68.                 originalCluster,
  69.                 themeCluster
  70.               );
  72.               let styleTag = document.getElementById(id);
  73.               if (!styleTag) {
  74.                 styleTag = document.createElement("style");
  75.                 styleTag.setAttribute("id", id);
  76.                 // document.head.appendChild(styleTag)
  77.                 document
  78.                   .getElementsByTagName("style")[0]
  79.                   .insertBefore(styleTag, null);
  80.               }
  81.               styleTag.innerText = newStyle;
  82.             };
  83.           };
  85.           const chalkHandler = getHandler("chalk", "chalk-style");
  87.           if (!this.chalk) {
  88.             const url = `../../assets/style/theme/index.css`;//本地css样式地址
  89.             // const url = `./dist/index.css`;//项目打包后css地址（原文件放入public文件夹中）
  90.             // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;//如果是公司内网，此网址则不适用
  91.             this.getCSSString(url, chalkHandler, "chalk");
  93.           } else {
  94.             chalkHandler();
  95.           }
  97.           const styles = [].slice
  98.             .call(document.querySelectorAll("style"))
  99.             .filter(style => {
  100.               const text = style.innerText;
  101.               return (
  102.                 new RegExp(oldVal, "i").test(text) &&
  103.                 !/Chalk Variables/.test(text)
  104.               );
  105.             });
  106.           styles.forEach(style => {
  107.             const { innerText } = style;
  108.             if (typeof innerText !== "string") return;
  109.             style.innerText = this.updateStyle(
  110.               innerText,
  111.               originalCluster,
  112.               themeCluster
  113.             );
  114.           });
  115.           this.$store.commit("themColor", val);//将更换的颜色存入store
  116.           this.$emit("onThemeChange", val);
  118.         // 响应外部操作
  120.         //存入localStorage
  121.         // localStorage.setItem('tremePackers',val);
  122.         // if(this.showSuccess) {
  123.         //   this.$message({
  124.         //     message: '换肤成功',
  125.         //     type: 'success'
  126.         //   })
  127.         // } else {
  128.         //   this.showSuccess = true
  129.         // }
  131.     }
  132.   },
  133.   methods: {
  134.     updateStyle(style, oldCluster, newCluster) {
  135.       let newStyle = style;
  136.       oldCluster.forEach((color, index) => {
  137.         newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
  138.       });
  139.       return newStyle;
  140.     },
  142.     getCSSString(url, callback, variable) {
  143.       const xhr = new XMLHttpRequest();
  144.       xhr.onreadystatechange = () => {
  145.         if (xhr.readyState === 4 && xhr.status === 200) {
  146.           this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
  147.           callback();
  148.         }
  149.       };
  150.       xhr.open("GET", url);
  151.       xhr.send();
  152.     },
  154.     getThemeCluster(theme) {
  155.       const tintColor = (color, tint) => {
  156.         let red = parseInt(color.slice(0, 2), 16);
  157.         let green = parseInt(color.slice(2, 4), 16);
  158.         let blue = parseInt(color.slice(4, 6), 16);
  160.         if (tint === 0) {
  161.           // when primary color is in its rgb space
  162.           return [red, green, blue].join(",");
  163.         } else {
  164.           red += Math.round(tint * (255 - red));
  165.           green += Math.round(tint * (255 - green));
  166.           blue += Math.round(tint * (255 - blue));
  168.           red = red.toString(16);
  169.           green = green.toString(16);
  170.           blue = blue.toString(16);
  172.           return `#${red}${green}${blue}`;
  173.         }
  174.       };
  176.       const shadeColor = (color, shade) => {
  177.         let red = parseInt(color.slice(0, 2), 16);
  178.         let green = parseInt(color.slice(2, 4), 16);
  179.         let blue = parseInt(color.slice(4, 6), 16);
  181.         red = Math.round((1 - shade) * red);
  182.         green = Math.round((1 - shade) * green);
  183.         blue = Math.round((1 - shade) * blue);
  185.         red = red.toString(16);
  186.         green = green.toString(16);
  187.         blue = blue.toString(16);
  189.         return `#${red}${green}${blue}`;
  190.       };
  192.       const clusters = [theme];
  193.       for (let i = 0; i <= 9; i++) {
  194.         clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
  195.       }
  196.       clusters.push(shadeColor(theme, 0.1));
  197.       return clusters;
  198.     }
  199.   }
  200. };
  201. </script>
  203. <style>
  204. .theme-picker .el-color-picker__trigger {
  205.   vertical-align: middle;
  206. }
  208. .theme-picker-dropdown .el-color-dropdown__link-btn {
  209.   display: none;
  210. }
  211. .el-color-picker--small .el-color-picker__trigger {
  212.   border: none;
  213. }
  214. </style>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25yc2toZHps_size_16_color_FFFFFF_t_70

上面这块代码值得注意，红框里的代码是在head里所有节点后插入一个新的style标签，打包后优先级较高，但有个问题，有些地方的颜色直接消失变成空白影响了样式，于是改成绿框里的代码，但绿框里的代码打包后优先级会低于原来样式颜色的而优先级，所以需要根据项目调样式优先级

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25yc2toZHps_size_16_color_FFFFFF_t_70 1

这块的代码也需要注意，如果公司直接使用的外网那么直接使用第三个url就行，如果公司使用的内网访问不了外部网页那么可以通过第三条url下载项目对应element版本的css样式,把css文件放到项目里，但要注意放到不会被编译的问价夹里，我项目用的是vue cli4,所以我动态转换的css文件放在public文件夹里，放到assets问价夹中样式文件会被编译，因而路径会报404，并且这块使用的url是文件打包编译后样式的路径，这是值得注意的地方

2.如果项目中有的样式颜色没有用到element，可以把颜色缓存到vuex里，然后在具体逐渐里通过计算属性获取再在样式上动态绑定

vuex：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25yc2toZHps_size_16_color_FFFFFF_t_70 2

使用的组件中：

20200708133515521.png

20200708133341603.png

发表评论

表情：
评论列表 （有 0 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uni-app 应用换肤功能

    应用换肤这个 “毫无卵用”  又浪费时间的的功能却是许多产品经理们喜欢玩的（某信国民应用都不做的功能）。 首先我坦白，我TM就从没用过 应用换肤 这种功能，其次我 氪金 跟有

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 334 阅读