使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例

更新時(shí)間：2018年02月21日 20:56:50 作者：lianxun0107

下面小編就為大家分享一篇使用vue + less 實(shí)現(xiàn)簡(jiǎn)單換膚功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

做的換膚效果比較簡(jiǎn)單，只是頂部導(dǎo)航背景色的改變。下面是效果圖。

首先，先說(shuō)一下我最初的思路。

我最初的想法是使用less定義變量，然后通過(guò)js來(lái)切換變量，通過(guò)切換的變量來(lái)達(dá)到換膚的效果。

我先新建了一個(gè) theme.less文件，代碼如下：

 @theme:@themea;
 @themea:pink;
 @themeb:blue;
 @themec:gray;

如我最開(kāi)始的想法，應(yīng)該是通過(guò)點(diǎn)擊事件來(lái)改變變量 @theme 的值。

我用了element-ui這個(gè)框架，所以我的下拉菜單的代碼也不復(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)">夢(mèng)幻粉</el-dropdown-item>
 <el-dropdown-item command="b" @click="change_type(b)">天空藍(lán)</el-dropdown-item>
 <el-dropdown-item command="c" @click="change_type(c)">霧霾灰</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

點(diǎn)擊事件的回調(diào)事件綁定在command事件，我定義了一個(gè)changeColor的方法

  changeColor(command){
  console.log(command);//能獲取到當(dāng)前點(diǎn)擊的元素的command
 }

于是，問(wèn)題來(lái)了，我怎么通過(guò)點(diǎn)擊事件來(lái)改變@theme的值呢？我陷入了沉（搜）思（索）……

終于找到了一個(gè)迂回解決問(wèn)題的方法，其實(shí)一開(kāi)始的想法也沒(méi)有問(wèn)題，但是需要再包裝一層。怎么包裝呢？我們雖然暫時(shí)控制不了變量值，但是我們可以控制元素的類名。

我們可以將換膚的部分抽出來(lái)用less函數(shù)來(lái)表示，將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;
 }
 }
}

新建一個(gè)color.less，設(shè)置幾種不同的皮膚樣式。這里不同的皮膚樣式，我用themea,themeb,themec….來(lái)表示，對(duì)應(yīng)組件中的command值。當(dāng)我點(diǎn)擊粉色的時(shí)候，調(diào)用相應(yīng)的函數(shù)給元素添加相對(duì)應(yīng)的類名。不要忘記引用 theme.less

 @import url('./theme.less');
  .themea{
   .theme();//默認(rèn)的樣式
  }
  .themeb{
   .theme(blue,#fff);
  }
  .themec{
   .theme(#111,#999);
  }

當(dāng)點(diǎn)擊換膚的下拉菜單時(shí)，調(diào)用的changeColor方法需要給元素添加不同的類名，當(dāng)然color.less文件記得引用。

 changeColor(command){
  console.log(command);
  document.getElementById('app').className ='theme'+command ;
 }

在這一塊的時(shí)候，剛開(kāi)始我也遇到一個(gè)問(wèn)題，就是我剛開(kāi)始只將這個(gè)頁(yè)面的樣式單獨(dú)抽了出來(lái)，所以其他組件的頭部樣式并沒(méi)有改變。我的第一個(gè)想法竟然是使用cookie，額，后來(lái)想著既然是單頁(yè)面，那我將樣式綁定在比較頂層的元素上，是不是可以？

結(jié)果，顯而易見(jiàn)！??！

如果要記住上一次換的皮膚，我使用的是localStorage，將每次點(diǎn)擊換膚的主題記錄下來(lái)，然后再頁(yè)面渲染之前判斷是否有這個(gè)主題就可以了。效果如下