vue+lessを使った簡単なスキン変更機能の実装方法

以下に、vue +less を使用して簡単なスキン変更関数を実装する例を紹介します。これは非常に参考になるので、皆さんの参考になれば幸いです。

スキン変更エフェクトは比較的シンプルで、上部のナビゲーションの背景色を変更するだけです。 以下はレンダリングです。

まず、私の最初の考えを話させてください。

私の最初のアイデアは、変数の定義に使用する変数を減らし、js を通じて変数を切り替え、切り替えた変数を通じてスキンを変える効果を実現するというものでした。

私は最初に次のコードで新しい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>

click イベントのコールバック イベントは 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;
 }
 }
}

Create新しい color.less では、いくつかの異なるスキン スタイルを設定します。ここでのさまざまなスキン スタイルは、コンポーネントのコマンド値に対応する、themea、themeb、themec... で表されます。ピンク色をクリックすると、対応する関数が呼び出され、対応するクラス名が要素に追加されます。 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 ;
 }

この作品に取り組んでいるとき、私も最初に問題に遭遇しました。つまり、最初にこのページのスタイルを個別に抽出しただけなので、他のコンポーネントのヘッドスタイルは変更されませんでした。最初に考えたのは、Cookie を使用することでした。それでは、単一のページなので、スタイルをトップレベルの要素にバインドしてもよいのではないかと考えました。

結果は明らかです！ ！ ！

最後のスキン変更を覚えておきたい場合は、localStorage を使用して各スキン変更のテーマを記録し、ページをレンダリングする前にそのようなテーマがあるかどうかを判断します。効果は以下の通りです

以上、皆さんの参考になれば幸いです。

関連記事:

vue-cliパッケージ化時のプロジェクト関連の設定ファイル抽出問題について(詳細チュートリアル)

Vueを使用したルーティング権限管理の問題(詳細チュートリアル)

使い方についてvue.js タグ属性に変数パラメーターを挿入する (詳細なチュートリアル)

以上がvue+lessを使った簡単なスキン変更機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。