使用vue + less 实现简单换肤功能的示例


Posted in Javascript onFebruary 21, 2018

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

使用vue + less 实现简单换肤功能的示例 

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

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

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

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

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

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

<el-dropdown class="colorBtn " trigger="click" @command="changeColor">
 <span class="el-dropdown-link " >换肤</span>
 <el-dropdown-menu slot="dropdown">
 <el-dropdown-item command="a" @click="change_type(a)">梦幻粉</el-dropdown-item>
 <el-dropdown-item command="b" @click="change_type(b)">天空蓝</el-dropdown-item>
 <el-dropdown-item command="c" @click="change_type(c)">雾霾灰</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

点击事件的回调事件绑定在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;

 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….来表示,对应组件中的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 ;
 }

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

结果,显而易见!!!

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

使用vue + less 实现简单换肤功能的示例 

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

Javascript 相关文章推荐
js DOM 元素ID就是全局变量
Sep 20 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
vue权限问题的完美解决方案
May 08 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 #Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
Angular实现的进度条功能示例
Feb 18 #Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 #Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 #Javascript
Vue底层实现原理总结
Feb 17 #Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 #Javascript
You might like
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python实现Flappy Bird源码
2018/12/24 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python换行与不换行的输出实例
2020/02/19 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
百货商场楼层班组长竞聘书
2014/03/31 职场文书
单位委托书范本
2014/04/04 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
电工实训心得体会
2016/01/14 职场文书