vue+iview+less 實現(xiàn)換膚功能
更新時間：2018年08月17日 11:12:41 作者：krify
這篇文章主要介紹了vue+iview+less 實現(xiàn)換膚功能,項目搭建用的vue—cli，css框架選擇的iview，具體操作流程大家跟隨腳本之家小編一起看看吧
項目搭建用的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文件中，進行如下操作
<Dropdown>
<a href="javascript:void(0)" rel="external nofollow" >
下拉菜單
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem @click.native="changeColor(1)">搖滾主題</DropdownItem>
<DropdownItem @click.native="changeColor(2)">新時代主題</DropdownItem>
<DropdownItem @click.native="changeColor(3)">基礎主題</DropdownItem>
</DropdownMenu>
</Dropdown>
//更換主題
changeColor(num){
//把className theme1，theme2，theme3掛載在app.vue的<div id="app"></div>上
document.getElementById('app').className ='theme'+num ;
this.localStorageDate()
},
//存儲localStoarge，用于進入系統(tǒng)時，記住用戶上一次的選擇，自動加載用戶上一次選擇的主題主題，記得在mounted()里面調用
localStorageDate(){
localStorage.setItem('app',document.getElementById('app').className)
}
總結
以上所述是小編給大家介紹的vue+iview+less 實現(xiàn)換膚功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
在本篇文章里小編給大家整理了關于vue中nextTick用法實例以及相關代碼內容，需要的朋友們可以參考下。2019-09-09
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Ant Design Vue Pro靜態(tài)路由如何改為動態(tài)路由
這篇文章主要介紹了Ant Design Vue Pro靜態(tài)路由如何改為動態(tài)路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
vue實現(xiàn)手機號碼的校驗實例代碼（防抖函數(shù)的應用場景）
這篇文章主要給大家介紹了關于vue實現(xiàn)手機號碼的校驗的相關資料，主要是防抖函數(shù)的應用場景，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
Vue組件更新數(shù)據(jù)v-model不生效的解決
這篇文章主要介紹了Vue組件更新數(shù)據(jù)v-model不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了基于el-table實現(xiàn)行內增刪改功能,用過通過操作按鈕點擊刪除或者編輯功能即可實現(xiàn)相應的效果,下面小編給大家分享實例代碼感興趣的朋友跟隨小編一起看看吧2024-04-04
Element實現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要介紹了Vue面試題及Vue知識點整理，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue.js 初體驗之Chrome 插件開發(fā)實錄 ,需要的朋友可以參考下2017-05-05