vue+iview+less 实现换肤功能

amuqiao 发布于2019-08-26 12:14 / 3004人阅读

摘要：项目搭建用的，框架选择的首先安装支持然后去文件夹下的文件中，添加对的支持准备工作做好了，开始换肤新建一个文件夹，在里面新建一个文件定义一个方法，写上需要的颜色参数如图文件夹下再新建一个存放各类主题的文件，里面根据自己需求定义各类主题

项目搭建用的vue—cli，css框架选择的iview
1、首先安装less支持

npm install --save-dev less-loader less

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

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

2.1新建一个文件夹styles，在里面新建一个文件theme.less 
定义一个.theme()方法，写上需要的颜色参数如图：

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文件中，进行如下操作

     
        
            下拉菜单
            
        
        
            摇滚主题
            新时代主题
            基础主题
        
    
    
     //更换主题
      changeColor(num){
        //把className theme1，theme2，theme3挂载在app.vue的上
        document.getElementById("app").className ="theme"+num ;
        this.localStorageDate()
      },
     //存储localStoarge，用于进入系统时，记住用户上一次的选择，自动加载用户上一次选择的主题主题，记得在mounted()里面调用
      localStorageDate(){
        localStorage.setItem("app",document.getElementById("app").className)
      }

云服务器 GPU云服务器换肤功能 VUE实现webrtc Vue实现分页 vue+webrtc实现实时视频通话,语音通话

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108301.html

vue+iview+less 实现换肤功能

摘要：项目搭建用的，框架选择的首先安装支持然后去文件夹下的文件中，添加对的支持准备工作做好了，开始换肤新建一个文件夹，在里面新建一个文件定义一个方法，写上需要的颜色参数如图文件夹下再新建一个存放各类主题的文件，里面根据自己需求定义各类主题项目搭建用的vue—cli，css框架选择的iview1、首先安装less支持 npm install --save-dev less-loader le...

LancerComet 2019-08-29 16:26 评论0 收藏0
vue+iview+less 实现换肤功能

摘要：项目搭建用的，框架选择的首先安装支持然后去文件夹下的文件中，添加对的支持准备工作做好了，开始换肤新建一个文件夹，在里面新建一个文件定义一个方法，写上需要的颜色参数如图文件夹下再新建一个存放各类主题的文件，里面根据自己需求定义各类主题项目搭建用的vue—cli，css框架选择的iview1、首先安装less支持 npm install --save-dev less-loader le...

Songlcy 2019-08-02 11:17 评论0 收藏0
iView 发布后台管理系统 iview-admin，没错，它就是你想要的

摘要：简介是基于，搭配使用组件库形成的一套后台集成解决方案，由前端可视化团队部分成员开发维护。遵守设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 简介 iView Admin 是基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解...

HackerShell 2019-08-21 17:06 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0