vue+iview+less 实现换肤功能


Posted in Javascript onAugust 17, 2018

项目搭建用的vue—cli,css框架选择的iview

1、首先安装less支持

npm install --save-dev less-loader less

然后去build文件夹下的webpack.base.conf.js文件中,添加对.less的支持

vue+iview+less 实现换肤功能

2、准备工作做好了,开始换肤

2.1新建一个文件夹styles,在里面新建一个文件theme.less

定义一个.theme()方法,写上需要的颜色参数如图:

vue+iview+less 实现换肤功能

2.2 styles文件夹下再新建一个存放各类主题的color.less文件,里面根据自己需求定义各类主题,记得把theme.less文件引入

@import url('./theme.less');
  .theme1{
    .theme();//默认的样式
  }
  .theme2{
    .theme(rgb(141, 139, 219),#fff,#eee,rgb(130, 126, 240));
  }
  .theme3{
    .theme(rgb(172, 214, 200),#615f5f,#fff,rgb(91, 139, 123));
  }

   2.3 在main.js中引入color.less文件

import './styles/color.less'

2.4 在进行主题选择的.vue文件中,进行如下操作

<Dropdown>
    <a href="javascript:void(0)" rel="external nofollow" >
      下拉菜单
      <Icon type="arrow-down-b"></Icon>
    </a>
    <DropdownMenu slot="list">
      <DropdownItem @click.native="changeColor(1)">摇滚主题</DropdownItem>
      <DropdownItem @click.native="changeColor(2)">新时代主题</DropdownItem>
      <DropdownItem @click.native="changeColor(3)">基础主题</DropdownItem>
    </DropdownMenu>
  </Dropdown>
   //更换主题
   changeColor(num){
    //把className theme1,theme2,theme3挂载在app.vue的<div id="app"></div>上
    document.getElementById('app').className ='theme'+num ;
    this.localStorageDate()
   },
   //存储localStoarge,用于进入系统时,记住用户上一次的选择,自动加载用户上一次选择的主题主题,记得在mounted()里面调用
   localStorageDate(){
    localStorage.setItem('app',document.getElementById('app').className)
   }

总结

以上所述是小编给大家介绍的vue+iview+less 实现换肤功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
JS实现的简单表单验证功能示例
Oct 13 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
js实现滑动进度条效果
Aug 21 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 #Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 #Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 #Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 #Javascript
LayerClose弹窗关闭刷新方法
Aug 17 #Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 #Javascript
You might like
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
Jquery获取radio选中值实例总结
2019/01/17 jQuery
对Layer UI 模块化的用法详解
2019/09/26 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python实现任意位置文件分割的实例
2018/12/14 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
Python基于execjs运行js过程解析
2020/11/27 Python
python多线程和多进程关系详解
2020/12/14 Python
python自动生成sql语句的脚本
2021/02/24 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
2015年感恩父亲节演讲稿
2015/03/19 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
田径运动会广播稿
2015/08/19 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
能让Python提速超40倍的神器Cython详解
2021/06/24 Python