基于element-ui动态换肤的方法

魁首哥

作者

基于element-ui动态换肤的方法

这篇文章主要讲解了“基于element-ui动态换肤的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于element-ui动态换肤的方法”吧！

1、在安装好element-ui@2.x 以后，首先安装sass-loader

npmisass-loadernode-sass-D

2、安装element-theme

npmielement-theme-D

3、安装theme-chalk

npmielement-theme-chalk-D#orfromgithubnpmihttps://github.com/ElementUI/theme-chalk-D

4、初始化变量文件

et-i//默认的文件是element-variables.scss，也可以自定义文件名et--init[filepath]

安装成功以后，在项目里会自动生成一个element-variables.scss 文件，如下图：

里面定义的是所有的颜色变量

当然，这一步也有可能失败，命令行提示找不到et 这个命令。这个时候需要按照步骤一，重新装一下sass-loader

5、修改变量

直接编辑 element-variables.scss 文件，例如修改主题色为红色

6、编译主题

保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数；如果你在初始化时指定了自定义变量文件，则需要增加 -c 参数，并带上你的变量文件名

此时，项目中会自动生成一个theme文件夹，里面是编译后所有的字体文件和样式文件

7、引入自定义主题

默认情况下编译的主题目录是放在 ./theme 下，你可以通过 -o 参数指定打包目录。像引入默认主题一样，在代码里直接引用 theme/index.css 文件即可。

import'../theme/index.css'importElementUIfrom'element-ui'importVuefrom'vue'Vue.use(ElementUI)

启动项目，会发现原来默认的蓝色会变成红色

官网提供的这种方法仅适用于一次性的更改全局主题颜色，如果想实现官网2.0版本右上角，使用 ColorPicker 颜色选择器动态换肤。那么建议参考vue-element-admin，作者的《手摸手，带你用vue撸后台》系列文章非常精彩

ThemePicker.vue<template><el-tooltipeffect="dark"content="theme"placement="bottom"><el-color-pickerv-model="theme"class="theme-picker"size="small"popper-class="theme-picker-dropdown"/></el-tooltip></template><script>constversion=require('element-ui/package.json').version//element-uiversionfromnode_modulesconstORIGINAL_THEME='#409EFF'//defaultcolorexportdefault{data(){return{chalk:'',//contentoftheme-chalkcsstheme:ORIGINAL_THEME}},watch:{theme(val,oldVal){if(typeofval!=='string')returnconstthemeCluster=this.getThemeCluster(val.replace('#',''))constoriginalCluster=this.getThemeCluster(oldVal.replace('#',''))console.log(themeCluster,originalCluster)constgetHandler=(variable,id)=>{return()=>{constoriginalCluster=this.getThemeCluster(ORIGINAL_THEME.replace('#',''))constnewStyle=this.updateStyle(this[variable],originalCluster,themeCluster)letstyleTag=document.getElementById(id)if(!styleTag){styleTag=document.createElement('style')styleTag.setAttribute('id',id)document.head.appendChild(styleTag)}styleTag.innerText=newStyle}}constchalkHandler=getHandler('chalk','chalk-style')if(!this.chalk){consturl=`https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`this.getCSSString(url,chalkHandler,'chalk')}else{chalkHandler()conststyles=[].slice.call(document.querySelectorAll('style')).filter(style=>{consttext=style.innerTextreturnnewRegExp(oldVal,'i').test(text)&&!/ChalkVariables/.test(text)})styles.forEach(style=>{const{innerText}=styleif(typeofinnerText!=='string')returnstyle.innerText=this.updateStyle(innerText,originalCluster,themeCluster)})this.$message({message:'换肤成功',type:'success'methods:{updateStyle(style,oldCluster,newCluster){letnewStyle=styleoldCluster.forEach((color,index)=>{newStyle=newStyle.replace(newRegExp(color,'ig'),newCluster[index])returnnewStyle},getCSSString(url,callback,variable){constxhr=newXMLHttpRequest()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){consttintColor=(color,tint)=>{letred=parseInt(color.slice(0,2),16)letgreen=parseInt(color.slice(2,4),16)letblue=parseInt(color.slice(4,6),16)if(tint===0){//whenprimarycolorisinitsrgbspacereturn[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}`constshadeColor=(color,shade)=>{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}`constclusters=[theme]for(leti=0;i<=9;i++){clusters.push(tintColor(theme,Number((i/10).toFixed(2))))clusters.push(shadeColor(theme,0.1))returnclusters}}</script>

Navbar.vue<template><el-menuclass="navbar"mode="horizontal"><hamburgerclass="hamburger-container":toggleClick="toggleSideBar":isActive="!sidebar.opened"></hamburger><divclass="right-menu"><screenfullclass="screenfull"></screenfull><divclass="lang"><el-dropdown><iclass="iconfonticon-language4"></i><el-dropdown-menuslot="dropdown"><el-dropdown-item@click.native="toggleLang('zh')":disabled="$i18n.locale=='zh'">中文</el-dropdown-item><el-dropdown-item@click.native="toggleLang('en')":disabled="$i18n.locale=='en'">English</el-dropdown-item></el-dropdown-menu></el-dropdown></div><theme-picker></theme-picker></div></el-menu></template>