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 および Oracle のバッチ挿入 SQL の一般的な記述例

目次例えば:一般的な執筆:要約する例えば:次に、データベースのUSERテーブルにUserオブジェクト...

MySQL 5.7.17 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17 winx64解凍版のインストールと設定方法を紹介します。具体...

17の広告効果測定の解釈

1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習

目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...

VueはAmapを使用して都市の位置特定を実現

この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...

Nest.js 認証検証方法の例

目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

私が良いと思うクールなデザインサイトをいくつかまとめてみました。

ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...

CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

序文フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジー...

Docker イメージのエクスポート、インポート、コピーの例の分析

最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...

ページング効果を実現するNode+Express

この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法

序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...