欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
微信点餐小程序_使用vue + less 完成简略换肤功用
时间: 2021-01-08 16:33 浏览次数:
应用vue + less 完成简易焕肤作用的实例 下边网编就为大伙儿共享一篇应用vue + less 完成简易焕肤作用的实例,具备非常好的参照使用价值,期待对大伙儿有一定的协助。一起追随网
使用vue + less 实现简单换肤功能的示例       下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

做的换肤效果比较简单,只是顶部导航背景色的改变。下面是效果图。

 

首先,先说一下我最初的思路。

我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果。

我先新建了一个 theme.less文件,代码如下:

 @theme:@themea;
 @themea:pink;
 @themeb:blue;
 @themec:gray;

如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值。

我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂:

 el-dropdown trigger="click" @command="changeColor" 
 span 换肤 /span 
 el-dropdown-menu slot="dropdown" 
 el-mand="a" @click="change_type(a)" 梦幻粉 /el-dropdown-item 
 el-mand="b" @click="change_type(b)" 天空蓝 /el-dropdown-item 
 el-mand="c" @click="change_type(c)" 雾霾灰 /el-dropdown-item 
 /el-dropdown-menu 
 /el-dropdown 
 mand){
 mand);//mand
 }

于是,问题来了,(搜)思(索)……

终于找到了一个迂回解决问题的方法,其实一开始的想法也没有问题,但是需要再包装一层。怎么包装呢?我们虽然暂时控制不了变量值,但是我们可以控制元素的类名。

我们可以将换肤的部分抽出来用less函数来表示,将theme.less代码改成下面代码

其中 @backcolor是背景色,@fcolor是字体颜色

.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
 .header {
 color: @fcolor;
 background: @backcolor;
 width: 100%;
 height: 2rem;
 position: relative;
 h4 {
 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….mand值。当我点击粉色的时候,调用相应的函数给元素添加相对应的类名。不要忘记引用 theme.less

 @import url('./theme.less');
 .themea{
 .theme();//默认的样式
 .themeb{
 .theme(blue,#fff);
 .themec{
 .theme(#111,#999);
 }

当点击换肤的下拉菜单时,调用的changeColor方法需要给元素添加不同的类名,当然color.less文件记得引用。

 mand){
 mand);
 document.getElementById('app').className ='theme'+command ;
 }

在这一块的时候,刚开始我也遇到一个问题,就是我刚开始只将这个页面的样式单独抽了出来,所以其他组件的头部样式并没有改变。我的第一个想法竟然是使用cookie,额,后来想着既然是单页面,那我将样式绑定在比较顶层的元素上,是不是可以?

结果,显而易见!!!

如果要记住上一次换的皮肤,我使用的是localStorage,将每次点击换肤的主题记录下来,然后再页面渲染之前判断是否有这个主题就可以了。效果如下

 

以上这篇使用vue + less 实现简单换肤功能的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园