使用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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
利用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
第六节 访问属性和方法 [6]
2006/10/09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Python素数检测的方法
2015/05/11 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python socket实现简单聊天室
2018/04/01 Python
详解python中eval函数的作用
2019/10/22 Python
python如何使用代码运行助手
2020/07/03 Python
python反扒机制的5种解决方法
2021/02/06 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
专业销售业务员求职信
2013/11/18 职场文书
环保建议书600字
2014/05/14 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
十岁生日答谢词
2015/01/05 职场文书
2015年库房工作总结
2015/04/30 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL