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 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
javascript生成随机数的方法
May 16 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中sort和sorted函数代码解析
2018/01/25 Python
Python中@property的理解和使用示例
2019/06/11 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
我的网上商城创业计划书
2013/12/26 职场文书
养殖项目策划书范文
2014/01/13 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
创业计划书之酒厂
2019/10/14 职场文书
七年级作文之雪景
2019/11/18 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
MySQL日期时间函数知识汇总
2022/03/17 MySQL