使用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——表单应用范例
Feb 20 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
利用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
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
js切换div css注意的细节
2012/12/10 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
js验证密码强度解析
2020/03/18 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
JavaScript 异步时序问题
2020/11/20 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python顺序执行多个py文件的方法
2019/06/29 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
python解包用法详解
2021/02/17 Python
教师通用专业自荐书范文
2014/02/11 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL