成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

LancerComet / 3361人閱讀

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

項目搭建用的vue—cli，css框架選擇的iview
1、首先安裝less支持

npm install --save-dev less-loader less

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

2、準(zhǔn)備工作做好了，開始換膚

2.1新建一個文件夾styles，在里面新建一個文件theme.less 
定義一個.theme()方法，寫上需要的顏色參數(shù)如圖：

2.2 styles文件夾下再新建一個存放各類主題的color.less文件，里面根據(jù)自己需求定義各類主題，記得把theme.less文件引入

    @import url("./theme.less");
    .theme1{
        .theme();//默認(rèn)的樣式
    }
    .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 在進(jìn)行主題選擇的.vue文件中，進(jìn)行如下操作

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113740.html

相關(guān)文章

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

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

    amuqiao 評論0 收藏0

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

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

    Songlcy 評論0 收藏0

  • iView 發(fā)布后臺管理系統(tǒng) iview-admin，沒錯，它就是你想要的

    摘要：簡介是基于，搭配使用組件庫形成的一套后臺集成解決方案，由前端可視化團(tuán)隊部分成員開發(fā)維護(hù)。遵守設(shè)計和開發(fā)約定，風(fēng)格統(tǒng)一，設(shè)計考究，并且更多功能在不停開發(fā)中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 簡介 iView Admin 是基于 Vue.js，搭配使用 iView UI 組件庫形成的一套后臺集成解...

    HackerShell 評論0 收藏0

  • vue開發(fā)項目完全指南

    摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統(tǒng)一管理在項目開發(fā)過程中，會涉及到很多接口的處理，當(dāng)項目足夠大時，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項目的所遇到的問題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項目github地址 : 前端 https:...

    leoperfect 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<