怎么在vue中使用less實現一個換膚功能

這篇文章將為大家詳細講解有關怎么在vue中使用less實現一個換膚功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

新建了一個 theme.less文件，代碼如下：

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

如我最開始的想法，應該是通過點擊事件來改變變量 @theme 的值。

我用了element-ui這個框架，所以我的下拉菜單的代碼也不復雜：

<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>

點擊事件的回調事件綁定在command事件，我定義了一個changeColor的方法

  changeColor(command){
  console.log(command);//能獲取到當前點擊的元素的command
 }

于是，問題來了，我怎么通過點擊事件來改變@theme的值呢？我陷入了沉（搜）思（索）……

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

我們可以將換膚的部分抽出來用less函數來表示，將theme.less代碼改成下面代碼

其中 @backcolor是背景色，@fcolor是字體顏色

.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
 .header {
 color: @fcolor;
 background: @backcolor;
 width: 100%;
 height: 2rem;
 position: relative;

 h5 {
  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，設置幾種不同的皮膚樣式。這里不同的皮膚樣式，我用themea,themeb,themec….來表示，對應組件中的command值。當我點擊粉色的時候，調用相應的函數給元素添加相對應的類名。不要忘記引用 theme.less

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

當點擊換膚的下拉菜單時，調用的changeColor方法需要給元素添加不同的類名，當然color.less文件記得引用。

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

關于怎么在vue中使用less實現一個換膚功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。