国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

LancerComet / 3354人閱讀

摘要:項(xiàng)目搭建用的,框架選擇的首先安裝支持然后去文件夾下的文件中,添加對(duì)的支持準(zhǔn)備工作做好了,開始換膚新建一個(gè)文件夾,在里面新建一個(gè)文件定義一個(gè)方法,寫上需要的顏色參數(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)備工作做好了,開始換膚

2.1新建一個(gè)文件夾styles,在里面新建一個(gè)文件theme.less 
定義一個(gè).theme()方法,寫上需要的顏色參數(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://specialneedsforspecialkids.com/yun/113740.html

相關(guān)文章

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

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

    amuqiao 評(píng)論0 收藏0
  • vue+iview+less 實(shí)現(xiàn)換膚功能

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

    Songlcy 評(píng)論0 收藏0
  • iView 發(fā)布后臺(tái)管理系統(tǒng) iview-admin,沒錯(cuò),它就是你想要的

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

    HackerShell 評(píng)論0 收藏0
  • vue開發(fā)項(xiàng)目完全指南

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<