使用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);//能獲取到當(dāng)前點擊的元素的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值。當(dāng)我點擊粉色的時候，調(diào)用相應(yīng)的函數(shù)給元素添加相對應(yīng)的類名。不要忘記引用 theme.less
@import url('./theme.less');
.themea{
.theme();//默認(rèn)的樣式
}
.themeb{
.theme(blue,#fff);
}
.themec{
.theme(#111,#999);
}
當(dāng)點擊換膚的下拉菜單時，調(diào)用的changeColor方法需要給元素添加不同的類名，當(dāng)然color.less文件記得引用。
changeColor(command){
console.log(command);
document.getElementById('app').className ='theme'+command ;
}
在這一塊的時候，剛開始我也遇到一個問題，就是我剛開始只將這個頁面的樣式單獨抽了出來，所以其他組件的頭部樣式并沒有改變。我的第一個想法竟然是使用cookie，額，后來想著既然是單頁面，那我將樣式綁定在比較頂層的元素上，是不是可以？
結(jié)果，顯而易見?。?！
如果要記住上一次換的皮膚，我使用的是localStorage，將每次點擊換膚的主題記錄下來，然后再頁面渲染之前判斷是否有這個主題就可以了。效果如下
以上這篇使用vue + less 實現(xiàn)簡單換膚功能的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法
這篇文章主要介紹了Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了關(guān)于vue3項目打包與上線的相關(guān)資料,在項目完成得差不多得時候,就可以開始打包部署了,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本篇文章主要介紹了詳解vue.js的devtools安裝 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之異步隊列，文章基于Vue2?的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價值需要的小伙伴可以參考一下2022-04-04
vue3實現(xiàn)無縫滾動列表效果(大屏數(shù)據(jù)輪播場景)
vue3-scroll-seamless 是一個用于 Vue 3 的插件,用于實現(xiàn)無縫滾動的組件,它可以讓內(nèi)容在水平或垂直方向上無縫滾動,適用于展示輪播圖、新聞滾動、圖片展示等場景,本文就給大家介紹了vue3實現(xiàn)無縫滾動列表效果,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了深入理解Vue 單向數(shù)據(jù)流的原理，詳細(xì)的介紹了Vue 單向數(shù)據(jù)流的原理和使用，具有一定的參考價值，有興趣的可以了解一下2017-11-11
vue開發(fā)中的base和publicPath的區(qū)別
本文主要介紹了vue開發(fā)中的base和publicPath的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
今天小編就為大家分享一篇vue2.0獲取鼠標(biāo)位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09