Vue で CSS カスタム変数を使用する方法

Vue で CSS カスタム変数を使用する方法

CSS カスタム変数機能は古くから存在していますが、実際の開発ではあまり使用されていません。その理由は、lessやsassなどのプリプロセッサにはすでに変数を定義する機能があり、Vueやreactはスタイルを設定するのに非常に便利だからです。cssを使用して変数を定義するのは不便で不必要だと思う人もいるかもしれません。実際はそうではありません。最も直感的な例、「Vue を使用して疑似クラスの疑似要素のスタイルを設定する方法」を見てみましょう。これは 1 世紀も前からある問題です。ほとんどの人はクラス名を変更することで解決できるかもしれませんが、変更するスタイルが多数ある場合や、異なるデータで異なるスタイルをレンダリングしたい場合はどうすればよいでしょうか。今日はこの問題について直接お話ししたいと思います。 まず、CSS カスタム変数とは何かを理解しましょう。 使い方は簡単:

<スタイル>
div {
    --bg-color : pink; //変数を定義 color : var( --bg-color ) //var関数を通じて変数を使用する}
</スタイル>
<div>こんにちは</div>

ピンクの「こんにちは」が届きます。親で定義された変数は、子要素とその疑似クラスでも使用できます。

<スタイル>
div {
    --bg-color : pink; //変数を定義する color : var( --bg-color ); //var関数を通じて変数を使用する}
div:ホバー{
    背景色: var( --bg-color );
}
div スパン {
    背景色: var( --bg-color );
}
</スタイル>
<div>こんにちは <span>世界</span> </div>

var 関数はデフォルト値を設定することもできます。カスタム変数が見つからない場合にもデフォルト値を設定できます。

<スタイル>
div {
    color : var( --bg-color, pink ); // 2 番目のパラメータはデフォルト値です background-color : var( --bg-color ,--color,--a,red ); // 複数の変数を設定することもできます。左から右に検索されます }
</スタイル>
<div>こんにちは</div>

これで CSS カスタム変数の紹介は終了です。次に、Vue での使用法を見てみましょう。タグのスタイル属性で変数の値を設定できます。

<テンプレート>
	<div class="box" @click="changeColor" :style="{'--a' : a}">こんにちは</div>
</テンプレート>
エクスポートデフォルト{
  データ(){
    戻る {
      a : 「青」、
    }
  },
  メソッド: {
    色を変更する(){
      this.a = this.a === 'blue' ? "red" : "blue"
    }
  }
}
</スクリプト>
<スタイル>
  。箱 {
      色: var(--a);
  }
  .box:hover {
    背景色: var(--a);
  }
</スタイル>

div をクリックすると、マウスを置いたときのフォントの色と背景色が変わります。この時点で、CSS 変数をカスタマイズすることで、スタイルを簡単に変更し、疑似クラスのプロパティを直接変更できることがわかります。子要素は親のカスタム変数を共有できるため、親独自の変数を子コンポーネントで直接使用できます。

// 親コンポーネント <テンプレート>
	<div class="box" :style="{'--a' : a}">こんにちは <Child></Child></div>
</テンプレート>
エクスポートデフォルト{
  コンポーネント: {
      子供
  },
  データ(){
    戻る {
      a : 「青」、
    }
  }
}
</スクリプト>

//子コンポーネント
<テンプレート>
  <span>世界</span>
</テンプレート>

<スタイル lang="less">
  スパン {
      色: var(--color);
  }
</スタイル>

試してみると、その効果は驚くべきものです。このようにして、子コンポーネントと親コンポーネント間の値の転送をバイパスして、親コンポーネントの状態を変更して子コンポーネントのスタイルを変更することができます。注意: サブコンポーネントは、変数を使用できるスコープ クラスにマウントする必要があります。

上記の例から、サブ定義変数の便利さがわかります。使いやすさのために、vue カスタム命令を通じて変数を設定できます。

   // vue3 カスタムディレクティブ。
      関数 change(el,binding){
        for(let [key,value] of Object.entries(binding.value)){
            el.style.setProperty('--'+キー、値);
        }
    }
  app.directive(css, {
        マウント(el,binding){
            変更(el,バインディング)
        }
        更新(el, バインディング) {
            変更(el,バインディング)
        }
       
    })

el.style['--color'] = 'red' を使用して CSS 変数を変更することは無効であり、style.setProperty API を使用して設定する必要があることに注意してください。指示を登録したら可能です。

<テンプレート>
	<div v-css="{a,b}" クラス="box" @click="changeColor"></div>
</テンプレート>
エクスポートデフォルト{
  データ(){
    戻る {
      a : 「青」、
      b : 「ピンク」
    }
  },
  メソッド: {
    色を変更する(){
      this.a = this.a === 'blue' ? "red" : "blue"
      this.b = this.b === 'ピンク' ? "黄色" : "ピンク"
    }
  }
}
</スクリプト>
<スタイル>
  。箱 {
    幅: 100px;
    高さ: 100px;
    背景色: var(--a);
  }
  .box:hover {
    背景色: var(--b);
  }
</スタイル>

これにより、Vue のスタイル操作が大幅に容易になります。

これを基に、いくつかの最適化と拡張を行い、ツールを公開し、npm で公開しました。アドレスは www.npmjs.com/package/vue… です。ぜひダウンロードして体験してください。気に入ったら、スターを付けてください。

上記は、Vue が CSS カスタム変数を使用する方法の詳細です。Vue が CSS カスタム変数を使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 定義済み変数を使用して Vue で CSS スタイルを設定する方法の詳細な説明

<<:  Linuxパフォーマンス監視コマンドの簡単な紹介

>>:  MySQL 8 の新機能: 非表示のインデックス

推薦する

MySQL DATEDIFF 関数を使用して 2 つの日付間の時間間隔を取得する方法

説明する2 つの日付間の時間間隔を返します。文法DateDiff(間隔、日付1、日付2 [、週の最初...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...

CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明: CSS アニメーション プロパティを使用すると、ループが最初に読み込まれたときに白いギ...

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...

実務経験7年のフロントエンドスーパーバイザーによる経験共有

今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

MySQL が InnoDB テーブルが独立したテーブルスペースか共有テーブルスペースかを判断する方法の詳細な説明

序文InnoDB はデータをテーブルスペースに保存します。デフォルト設定では、初期サイズが 10 M...

Ubuntuはポート22を開きます

シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセ...

MySQL 8.0 オンライン DDL クイック列追加の概要

目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...

Linux と最もよく使用されるコマンドの紹介 (習得は簡単ですが、問題の 95% 以上を解決できます)

Linux は現在最も広く使用されているサーバー オペレーティング システムです。Unix をベー...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

Dockerイメージを完全にアンインストールする手順

1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...