使用vue + less 實現(xiàn)簡單換膚功能的示例
做的換膚效果比較簡單，只是頂部導(dǎo)航背景色的改變。下面是效果圖。
首先，先說一下我最初的思路。
我最初的想法是使用less定義變量，然后通過js來切換變量，通過切換的變量來達到換膚的效果。
我先新建了一個 theme.less文件，代碼如下：
@theme:@themea; @themea:pink; @themeb:blue; @themec:gray;
如我最開始的想法，應(yīng)該是通過點擊事件來改變變量 @theme 的值。
我用了element-ui這個框架，所以我的下拉菜單的代碼也不復(fù)雜：
<el-dropdown class="colorBtn " trigger="click" @command="changeColor"> <span class="el-dropdown-link " >換膚</span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="a" @click="change_type(a)">夢幻粉</el-dropdown-item> <el-dropdown-item command="b" @click="change_type(b)">天空藍</el-dropdown-item> <el-dropdown-item command="c" @click="change_type(c)">霧霾灰</el-dropdown-item> </el-dropdown-menu> </el-dropdown>
點擊事件的回調(diào)事件綁定在command事件，我定義了一個changeColor的方法
changeColor(command){
console.log(command);//能獲取到當前點擊的元素的command
}
于是，問題來了，我怎么通過點擊事件來改變@theme的值呢？我陷入了沉（搜）思（索）……
終于找到了一個迂回解決問題的方法，其實一開始的想法也沒有問題，但是需要再包裝一層。怎么包裝呢？我們雖然暫時控制不了變量值，但是我們可以控制元素的類名。
我們可以將換膚的部分抽出來用less函數(shù)來表示，將theme.less代碼改成下面代碼
其中 @backcolor是背景色，@fcolor是字體顏色
.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
.header {
color: @fcolor;
background: @backcolor;
width: 100%;
height: 2rem;
position: relative;
h4 {
width: 100%;
text-align: center;
line-height: 2rem;
font-size: 1rem;
}
.go-back {
width: 2rem;
height: 2rem;
text-align: center;
color: #fff;
font-size: 0.8rem;
float: left;
line-height: 2rem;
margin-left: 1rem;
position: absolute;
left: 0;
top: 0;
}
.header-cont {
width: 100%;
text-align: center;
line-height: 2rem;
font-size: 1rem;
color: #fff;
}
.colorBtn {
width: 2rem;
height: 2rem;
text-align: center;
color: #fff;
font-size: 0.8rem;
line-height: 2rem;
margin-right: 1rem;
position: absolute;
top: 0;
right: 0;
}
}
}
新建一個color.less，設(shè)置幾種不同的皮膚樣式。這里不同的皮膚樣式，我用themea,themeb,themec….來表示，對應(yīng)組件中的command值。當我點擊粉色的時候，調(diào)用相應(yīng)的函數(shù)給元素添加相對應(yīng)的類名。不要忘記引用 theme.less
@import url('./theme.less');
.themea{
.theme();//默認的樣式
}
.themeb{
.theme(blue,#fff);
}
.themec{
.theme(#111,#999);
}
當點擊換膚的下拉菜單時，調(diào)用的changeColor方法需要給元素添加不同的類名，當然color.less文件記得引用。
changeColor(command){
console.log(command);
document.getElementById('app').className ='theme'+command ;
}
在這一塊的時候，剛開始我也遇到一個問題，就是我剛開始只將這個頁面的樣式單獨抽了出來，所以其他組件的頭部樣式并沒有改變。我的第一個想法竟然是使用cookie，額，后來想著既然是單頁面，那我將樣式綁定在比較頂層的元素上，是不是可以？
結(jié)果，顯而易見?。?！
如果要記住上一次換的皮膚，我使用的是localStorage，將每次點擊換膚的主題記錄下來，然后再頁面渲染之前判斷是否有這個主題就可以了。效果如下
以上這篇使用vue + less 實現(xiàn)簡單換膚功能的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0/3.0中provide和inject的用法示例
provide和inject是成對出現(xiàn)的,主要用于父組件向子孫組件傳遞數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2.0/3.0中provide和inject用法的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue3自定義dialog、modal組件的方法,本文給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了vue.js 輸入框輸入值自動過濾特殊字符替換中問標點操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本次小編通過一個簡單的實例來教給大家如何寫一個vue插件，以及需要注意的地方，如果有需要的讀者跟著學(xué)習一下吧。2017-11-11
下面小編就為大家?guī)硪黄猇ue渲染函數(shù)詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
今天小編就為大家分享一篇基于element-ui的rules中正則表達式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3.3?+?TS4構(gòu)建實現(xiàn)ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時愈加平安和高效,本文將引見如何運用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個自主打造媲美?ElementPlus?的組件庫2023-10-10
Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了Vue實現(xiàn)圖書管理小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue中引入高德地圖并多點標注,實現(xiàn)步驟是通過vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09