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

資訊專欄INFORMATION COLUMN

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

Songlcy / 1589人閱讀

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

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

npm install --save-dev less-loader less

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

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

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

2.2 styles文件夾下再新建一個(gè)存放各類主題的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)行如下操作

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

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

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

相關(guān)文章

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

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

    LancerComet 評(píng)論0 收藏0

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

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

    amuqiao 評(píng)論0 收藏0

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

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

    HackerShell 評(píng)論0 收藏0

  • vue開(kāi)發(fā)項(xiàng)目完全指南

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

    leoperfect 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<