vue+iview+less 實(shí)現(xiàn)換膚功能
項(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)行如下操作
<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)">新時(shí)代主題</DropdownItem>
<DropdownItem @click.native="changeColor(3)">基礎(chǔ)主題</DropdownItem>
</DropdownMenu>
</Dropdown>
//更換主題
changeColor(num){
//把className theme1，theme2，theme3掛載在app.vue的<div id="app"></div>上
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)
}
總結(jié)
以上所述是小編給大家介紹的vue+iview+less 實(shí)現(xiàn)換膚功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 基于vue的換膚功能的示例代碼
- Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
- Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析
- 使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例
- Vue中使用sass實(shí)現(xiàn)換膚功能
- Vue 換膚的示例實(shí)踐
- vue實(shí)現(xiàn)換膚功能
- 基于Vue結(jié)合ElementUI的換膚解決方案
- vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果實(shí)例(webpack-theme-color-replacer的使用)
相關(guān)文章
在本篇文章里小編給大家整理了關(guān)于vue中nextTick用法實(shí)例以及相關(guān)代碼內(nèi)容，需要的朋友們可以參考下。2019-09-09
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Ant Design Vue Pro靜態(tài)路由如何改為動(dòng)態(tài)路由
這篇文章主要介紹了Ant Design Vue Pro靜態(tài)路由如何改為動(dòng)態(tài)路由問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue大數(shù)據(jù)表格卡頓問(wèn)題的完美解決方案
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問(wèn)題的完美解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼（防抖函數(shù)的應(yīng)用場(chǎng)景）
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的相關(guān)資料，主要是防抖函數(shù)的應(yīng)用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue組件更新數(shù)據(jù)v-model不生效的解決
這篇文章主要介紹了Vue組件更新數(shù)據(jù)v-model不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于el-table實(shí)現(xiàn)行內(nèi)增刪改功能
這篇文章主要介紹了基于el-table實(shí)現(xiàn)行內(nèi)增刪改功能,用過(guò)通過(guò)操作按鈕點(diǎn)擊刪除或者編輯功能即可實(shí)現(xiàn)相應(yīng)的效果,下面小編給大家分享實(shí)例代碼感興趣的朋友跟隨小編一起看看吧2024-04-04
Element實(shí)現(xiàn)表格分頁(yè)數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁(yè)數(shù)據(jù)選擇+全選所有完善批量操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Vue面試題及Vue知識(shí)點(diǎn)整理，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-10
vue.js 初體驗(yàn)之Chrome 插件開(kāi)發(fā)實(shí)錄
這篇文章主要介紹了vue.js 初體驗(yàn)之Chrome 插件開(kāi)發(fā)實(shí)錄 ,需要的朋友可以參考下2017-05-05