这篇文章将为大家详细讲解有关怎么在vue中使用less实现一个换肤功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联主要从事
网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务千阳,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
新建了一个 theme.less文件，代码如下：
@theme:@themea;
@themea:pink;
@themeb:blue;
@themec:gray;
如我最开始的想法，应该是通过点击事件来改变变量 @theme 的值。
我用了element-ui这个框架，所以我的下拉菜单的代码也不复杂：
换肤
梦幻粉
天空蓝
雾霾灰
点击事件的回调事件绑定在command事件，我定义了一个changeColor的方法
changeColor(command){
console.log(command);//能获取到当前点击的元素的command
}于是，问题来了，我怎么通过点击事件来改变@theme的值呢？我陷入了沉（搜）思（索）……
终于找到了一个迂回解决问题的方法，其实一开始的想法也没有问题，但是需要再包装一层。怎么包装呢？我们虽然暂时控制不了变量值，但是我们可以控制元素的类名。
我们可以将换肤的部分抽出来用less函数来表示，将theme.less代码改成下面代码
其中 @backcolor是背景色，@fcolor是字体颜色
.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
.header {
color: @fcolor;
background: @backcolor;
width: 100%;
height: 2rem;
position: relative;
h5 {
width: 100%;
text-align: center;
line-height: 2rem;
font-size: 1rem;
}
.go-back {
width: 2rem;
height: 2rem;
text-align: center;
color: #fff;
font-size: 0.8rem;
float: left;
line-height: 2rem;
margin-left: 1rem;
position: absolute;
left: 0;
top: 0;
}
.header-cont {
width: 100%;
text-align: center;
line-height: 2rem;
font-size: 1rem;
color: #fff;
}
.colorBtn {
width: 2rem;
height: 2rem;
text-align: center;
color: #fff;
font-size: 0.8rem;
line-height: 2rem;
margin-right: 1rem;
position: absolute;
top: 0;
right: 0;
}
}
}新建一个color.less，设置几种不同的皮肤样式。这里不同的皮肤样式，我用themea,themeb,themec….来表示，对应组件中的command值。当我点击粉色的时候，调用相应的函数给元素添加相对应的类名。不要忘记引用 theme.less
@import url('./theme.less');
.themea{
.theme();//默认的样式
}
.themeb{
.theme(blue,#fff);
}
.themec{
.theme(#111,#999);
}当点击换肤的下拉菜单时，调用的changeColor方法需要给元素添加不同的类名，当然color.less文件记得引用。
changeColor(command){
console.log(command);
document.getElementById('app').className ='theme'+command ;
}关于怎么在vue中使用less实现一个换肤功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻名称：怎么在vue中使用less实现一个换肤功能-创新互联
文章转载：
http://bjjierui.cn/article/dhhiei.html
