vue+lessで簡単な肌交換機能を実現

スキンケアの効果は簡単ですが、トップナビゲーションの背景色の変化だけです.次は効果図です.
まず、私の最初の考えを話します.
私の最初の考えはlessを使って変数を定義し、jsを通じて変数を切り替え、変数を切り替えることで肌を変える効果を達成することです.
まず新しいものを作りました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;

    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、いくつかの異なる皮膚スタイルを設定します.ここは違う肌のスタイルで、私はthemea、themeb、themecを使っています.を参照してください.ピンクをクリックすると、対応する関数を呼び出して要素に対応するクラス名を追加します.引用を忘れないで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 ;
    }

このブロックでは、最初はこのページのスタイルだけを抽出していたので、他のコンポーネントの頭部のスタイルは変わっていません.私の最初の考えはクッキーを使うことでした.ええと、後で単ページである以上、スタイルを比較的最上位の要素にバインドしてもいいのではないでしょうか.
結果、明らかに!!!
前回交換した肌を覚えておくには、localStorageを使って、毎回変更したテーマを記録してから、ページをレンダリングする前にこのテーマがあるかどうかを判断すればいいです.効果は以下の通りです.
続いて、一連のシングルページブログの制作もありますので、ご注目ください.
もちろん、牛が見たら、一二を教えてほしい.