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)換膚功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue2?Observer實例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了vue3之聲明式和編程式導航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue3?多種方法的錨點定位，使用?Vue?Router?導航守衛(wèi)可以簡化導航邏輯、統(tǒng)一管理導航邏輯和進行權限控制，但需要學習和理解相關概念，并且需要手動編寫和管理導航守衛(wèi)的邏輯,本文給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
element-ui vue input輸入框自動獲取焦點聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動獲取焦點聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue項目中的public、static及指定不編譯文件問題
這篇文章主要介紹了vue項目中的public、static及指定不編譯文件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue?表格單選按鈕的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法
這篇文章主要介紹了vite2.x實現(xiàn)按需加載ant-design-vue@next組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例，基于VUE + OPENLAYERS實現(xiàn)實時定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09