使用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 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
js实现tab切换效果实例
Sep 16 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
JS实现网页烟花动画效果
Mar 10 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
Cannot modify header information错误解决方法
2008/10/08 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python调用.NET库的方法步骤
2019/12/27 Python
通过自学python能找到工作吗
2020/06/21 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
高一课前三分钟演讲稿
2014/09/13 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
党员转正意见怎么写
2015/06/03 职场文书
爱国电影观后感
2015/06/19 职场文书
护理工作心得体会
2016/01/22 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers