vue实现换肤,
本文将介绍几种基于Vue和Element-UI的皮肤剥离实现方案，力求通俗易懂，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
写在前面的方案1中。使用全局样式覆盖(前端通用)方案2。自定义你自己的元素-ui配色方案3。快速改变网站配色方案4。实时改变主色。
写在前面
换肤不是很常见的功能，但也是有需求的，所以这里有一些前端的换肤解决方案，供大家参考。
本文将介绍几种基于Vue和Element-UI的换肤实现方案，力求简单易懂，易于使用。希望你喜欢~
方案一、使用全局的样式覆盖（前端通用）
这应该是最常见，最容易想到，也最容易实现的。
我们编写一个单独的样式表(css文件deep blue.css)，它以一个特定的名称开始(比如。蓝色主题)。然后，在这个css文件中，我们完成第二组皮肤的样式代码，然后当我们单击皮肤更改时，我们将类blue-theme添加到body标记中。那么，这个时候我们的换肤效果就出来了。
当我们单击此处的深空蓝时，我们会将类science-blue添加到正文中，当我们单击青铜绿时，我们会删除science-blue，因为我们的默认设置是青铜绿。
方案二、自定义自己的Element-ui配色
默认元素的配色方案是：
Element-UI还提供了自定义配色工具和配置页面。通过这个工具或者这个页面，我们可以自定义以上五种主色和辅色。
匹配后，如果是工具就生成，如果是网页就下载。获取一个样式文件，这是我们配置的主题样式文件。
保持css文件和fonts目录的关系不变(ps:这个很重要)放入我们的项目。(可以把这个css文件改成自己喜欢的名字，比如我改成：theme-summer.css)
然后在我们项目的main.js中，注释掉Element-UI的原css文件简介，引入我们刚刚放入项目的css文件。
这时项目中Element-UI的颜色就变成了我们刚才自定义的配色方案。下面是我定制的一组颜色。你怎么想呢？)
但是，你有没有注意到，这只是把我们项目中Element-UI的默认配色改成了我们想要的；但是我们想做的是换肤功能，希望颜色可以切换。
所以我们还是用上面的方法，在生成的css文件中给每个css样式添加一个唯一的命名前缀，然后在换肤的时候把这个类添加到正文中。这样一来，我们也可以实现丰富的换肤功能(因为我们自己可以搭配出很多漂亮的配色)。
现在需要解决的一个问题是：如何添加这个css文件和命名空间？
让我们看看这个工具生成的css文件，或者从配置页面导出的文件。混淆压缩后的代码，手动在每个样式之外包装一个类作为命名空间是不现实的，所以这里我们需要使用一个gulp插件gulp-css-wrap，它可以帮助我们完成这个结果。
首先：
npm我大口大口-干净-css大口-css-wrap -D
然后，编写gulpfile.js
//gulpfile.js
var path=require(path )
var gulp=require(gulp )
var clean CSS=require( gulp-clean-CSS )
var CSS wrap=require( gulp-CSS-wrap )
var customThemeName=。主题-夏天
gulp.task(default ，function() {
return gulp.src( path.resolve(。/index.css ))。管道(CSS wrap({ selector:custom theme name }))。管道(cleanCSS())。管道(gulp.dest(dist ))
})
然后大口地跑。
这样你就有了一个自定义主题。主题-夏天作为命名空间。
添加后，我们可以按照前面介绍的切换body元素的类的方法来实现皮肤切换的功能。
方案三、快速改变网站颜色
根据元素官网的介绍，元素写于SCSS。如果您的项目也使用SCSS，您可以直接更改项目中元素的样式变量。创建一个新元素-variables.scss样式文件。(提示：请确保您安装了node-sass和sass-loader)
Element-variables.scss文件，这里就不贴了。详情见这里：element-variables.scss，它定义了很多颜色变量。
这个方法用起来很简单，你只需要介绍一下就可以了。
修改里面的颜色变量生效。
通过修改几个颜色变量，该方法快速有效。(然后就可以部署啦~)
这里有个问题，如何在js中修改这个element-variables.scss文件中的变量？如果可以实现，那么就可以实现实时动态变色。
注意：js有修改scss变量的计划，但是在我们的项目中不能动态改变颜色。为什么？因为我们项目中所有的css预编译语言(sass，less，stylus)最终都会编译成CSS；也就是说，打包的项目中只有编译好的css文件。那么您更改scss变量的js方法将无法在打包的项目中工作。
方案四、实时更换主色调
之前介绍过几种换肤的方法，但都在我们极限提供的皮肤范围内；但是我们有一个要求，一个颜色选择器将弹出，然后无论我们选择什么颜色，页面的主色将立即更改为任何颜色。
ElementUI官网有动态换肤，允许用户自定义颜色值，显示效果更优雅。我们来看看他是怎么实现的(这里引用官方的实现解释)
获取Element-UI当前版本的样式文件(在线XHR)
根据用户选择的主题颜色生成一系列对应的颜色(比如选择绿色生成不同程度的浅绿和深绿……)
颜色替换(用刚刚生成的颜色替换样式文件中的颜色)
将样式标签直接添加到页面中，并填充生成的样式。
我们来看看技术实现细节。强烈建议大家打开代码一起看看：https://github . com/never Yu/vue-CMS/blob/master/src/views/theme/index . vue # L167-L297)
1.首先我们需要获取通过package.json获取的element-ui的版本号，根据版本号请求对应的样式。
//如果没有粉笔，第一次换颜色。你需要远程获取css文件，并将它们分配给chalk。
//对于后续的变色操作，不需要远程获取。
如果(！this .粉笔){
const URL= https://UNP kg . com/element-ui @ $ { version }/lib/theme-chalk/index . CSS
等待this.getCSSString(url， chalk )
}
getcssString方法是一种常用的XHR，用于获取远程CSS资源文件。
2.根据用户选择的颜色生成相应的颜色。
/**
*传入一个颜色的十六进制数，以获得该颜色的亮色和暗色数组。
*我们知道，我们默认的主色蓝色，在实际使用中，也需要相应的浅蓝和深蓝。
* @param {[string]]}主题[颜色]
* @ return {[array]}[对应明暗颜色数组]
*/
getThemeCluster(主题){
//具体看代码，这里就不写了。
//.
}
3.颜色替换
/*更新样式-用新的颜色变量替换以前的样式*/
updateStyle(style，oldCluster，newCluster) {
让新风格=风格
oldCluster.forEach((color，index)={
new style=new style . replace(new RegExp(color， ig )，newCluster[index])
})
返回新样式
}
4.将样式标记添加到页面，并填充生成的样式。
let style tag=document . getelementbyid(id)
如果(！styleTag) {
style tag=document . createelement( style )
styleTag.setAttribute(id ，id)
document . head . appendchild(style tag)
}
styleTag.innerText=newStyle
第一次换颜色的时候需要创建一个style标签，加到正文里，后面换颜色，就不需要了。
好了，看效果：
在此插入图片描述。
[在线演示：vue-cms]
[源代码：github.com/Neveryu/vue-cms]
关于基于Vue结合ElementUI的换肤解决方案，本文到此结束。关于结合使用Vue和ElementUI的皮肤的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。