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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
目次例えば:一般的な執筆:要約する例えば:次に、データベースのUSERテーブルにUserオブジェクト...
この記事では、MySQL 5.7.17 winx64解凍版のインストールと設定方法を紹介します。具体...
1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...
1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....
目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...
この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...
目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...
新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...
ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...
序文フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジー...
最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...
この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに...
目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...
最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...
序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...