elementPlus修改主题色及皮肤设置的方法是什么

本篇内容介绍了“elementPlus修改主题色及皮肤设置的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

elementPlus修改主题色以及皮肤设置

修改主题色

<el-color-pickerstyle=“margin-top:20px”v-model=“systeamColor”@change=“colorChange”/>

采用element颜色选择的组件

//变量前缀colorChange(e){//e就是选择了的颜色constpre="--el-color-primary";//白色混合色constmixWhite="#ffffff";//黑色混合色constmixBlack="#000000";constel=document.documentElement;el.style.setProperty(pre,e);//这里是覆盖原有颜色的核心代码for(leti=1;i<10;i+=1){el.style.setProperty(`${pre}-light-${i}`,mix(e,mixWhite,i*0.1));}el.style.setProperty("--el-color-primary-dark",mix(e,mixBlack,0.1));}

系统皮肤

通过提前定义好各种皮肤风格

通过vue的store以及localStorage去动态修改

同时代码中要使用变量方式引入store中的主题颜色

elementPlus修改主题颜色（含暗夜模式切换）

直接调用 setThemeColor(color) 函数，color 为传入的主题颜色

exportfunctionsetThemeColor(color){constel=document.documentElement;constbody=document.querySelector("body");//constnprogress=document.querySelector("#nprogress.bar");//console.log(nprogress)el.style.setProperty("--el-color-primary",color);body.style.setProperty("--van-primary-color",color);//nprogress.style.setProperty("background",color);//此行判断是否为白天/暗夜模式，可根据自身业务调整代码letmixColor=Store.state.settings.sideTheme.split("-")[1]==="light"?"#ffffff":"#000000";//此行判断是否为白天/暗夜模式，可根据自身业务调整代码for(leti=1;i<10;i++){el.style.setProperty(`--el-color-primary-light-${i}`,colourBlend(color,mixColor,i/10));el.style.setProperty(`--el-color-primary-dark-${i}`,colourBlend(color,mixColor,i/10));}el.style.setProperty(`--el-color-primary-dark-2`,colourBlend(color,mixColor,0.2));}exportfunctioncolourBlend(c1,c2,ratio){ratio=Math.max(Math.min(Number(ratio),1),0)letr1=parseInt(c1.substring(1,3),16)letg1=parseInt(c1.substring(3,5),16)letb1=parseInt(c1.substring(5,7),16)letr2=parseInt(c2.substring(1,3),16)letg2=parseInt(c2.substring(3,5),16)letb2=parseInt(c2.substring(5,7),16)letr=Math.round(r1*(1-ratio)+r2*ratio)letg=Math.round(g1*(1-ratio)+g2*ratio)letb=Math.round(b1*(1-ratio)+b2*ratio)r=('0'+(r||0).toString(16)).slice(-2)g=('0'+(g||0).toString(16)).slice(-2)b=('0'+(b||0).toString(16)).slice(-2)return'#'+r+g+b}

“elementPlus修改主题色及皮肤设置的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注主机评测网网站，小编将为大家输出更多高质量的实用文章！

上一篇：C#中怎么使用CAS实现无锁算法

下一篇：怎么用Ant?Design编写登录和注册页面

---