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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
ES2020 新特性(种草)
Jan 12 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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 获取客户端的真实ip
2009/11/30 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php绘制一个矩形的方法
2015/01/24 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python实现通讯录功能
2018/02/22 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python @property使用方法解析
2019/09/17 Python
500行python代码实现飞机大战
2020/04/24 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
管理部部长岗位职责
2013/12/05 职场文书
商场消防安全责任书
2014/07/29 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android