vue+iview+less 實現(xiàn)換膚功能

amuqiao 發(fā)布于2019-08-26 12:14 / 3006人閱讀

摘要：項目搭建用的，框架選擇的首先安裝支持然后去文件夾下的文件中，添加對的支持準備工作做好了，開始換膚新建一個文件夾，在里面新建一個文件定義一個方法，寫上需要的顏色參數(shù)如圖文件夾下再新建一個存放各類主題的文件，里面根據(jù)自己需求定義各類主題

項目搭建用的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()方法，寫上需要的顏色參數(shù)如圖：

2.2 styles文件夾下再新建一個存放各類主題的color.less文件，里面根據(jù)自己需求定義各類主題，記得把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文件中，進行如下操作

     
        
            下拉菜單
            
        
        
            搖滾主題
            新時代主題
            基礎(chǔ)主題
        
    
    
     //更換主題
      changeColor(num){
        //把className theme1，theme2，theme3掛載在app.vue的上
        document.getElementById("app").className ="theme"+num ;
        this.localStorageDate()
      },
     //存儲localStoarge，用于進入系統(tǒng)時，記住用戶上一次的選擇，自動加載用戶上一次選擇的主題主題，記得在mounted()里面調(diào)用
      localStorageDate(){
        localStorage.setItem("app",document.getElementById("app").className)
      }