VUEにおけるCSSスタイルの貫通
3040 ワード
VUEにおけるCSSスタイルの貫通
1.問題の由来
H 5の2つのアプリプロジェクトを行い、前期に微信公式推薦のweuiコンポーネントライブラリを採用した.その後、効果が望ましくなく、コンポーネントが豊富ではなかったため、最終プロジェクトが完了した後、すべてのアップグレードには開発された
2.スタイルの作成
状況を説明するために、私は本稿のためにdemoをテストしました.Vueプロジェクトを初期化し、必要なvantコンポーネントライブラリを導入した場合.次に、componentsフォルダにCssScopeを新規作成します.vueの単一ファイルコンポーネント.基本コードは次のとおりです.
コンパイル実行すると、ブラウザに90%の進捗状況のループ進捗バーが表示されます.もちろん表示文字の90%が黒で表示されていますが、今から変更します.最初は、文字の色colorは親から継承できると考えていたので、Styleラベルに次のcssスタイルを書きました.
ブラウザに戻っても文字の色は変わりません.Chromeのオープンツールで、私たちの円形の進捗バーを見つけます.このコンポーネントの内部はsvgとdivラベルで構成されており、svgは私たちの図形を表示し、divは文字を表示するために使用されていたことが分かった.このdivにはvan-circle__というclassが存在するtext.css優先度に基づいて、親で設定したフォントの色は無効です.原因を見つけたら、それはやりやすいです.このclassセレクタをStyleラベルで定義し、フォントの色を青に設定する必要があります.そこで、書いたばかりのスタイルを削除し、次のように書き換えました.
これでいいはずですが、ブラウザに戻っても効果は変わりません.黒か、黒か.このとき、chromeに戻り、開発者ツールで私たちの要素を見つけます.よく見ると、表示文字のラベルは親とは違うようで、
3.StyleのScopedの不思議な効果
私たちのプロジェクトは
コンパイルしたcssもそのランダム属性を加える
私たちはまた問題を解決するところに戻って、
4.深さ作用選択器
公式ドキュメントから、私たちがいわゆる貫通、公式は深さセレクタと呼ばれていることがわかりました.どのように使いますか.スルーしたいセレクタの前に>>>または/deep/または::v-deepを追加します.公式には>>問題がある可能性がありますが、使用後の2つをお勧めします.私たちが使用しているlessは、/deep/を選択しました.そこで、styleで削除したばかりのscoped属性を戻し、次のコードに変更しました.
ブラウザに戻ると、色が変わり、大成功しました.しかし、次の図に示すように、生成されたcssをもう一度確認する必要があります.
はい、大丈夫です.私たちが望んでいる結果です.
5.まとめ
コードを書いて、問題を調べて、正しいパスを探さなければなりません.他人のものを使って、対応する公式文書をたくさん見てください.
興味のある方は、私の微信購読番号「小庭は小さくない」に注目するか、下のQRコードをクリックして注目してください.私は長年の開発で出会った難点と、いくつかの面白い機能を、私の購読番号に一つ一つ発表することを体得しています.この文書demoは、vuescopedに公衆番号で返信する必要があります.
暇があっても大丈夫、cococos creatorを採用して小さなゲームを開発して、興味のある友达は一人で游びに来ることができます
1.問題の由来
H 5の2つのアプリプロジェクトを行い、前期に微信公式推薦のweuiコンポーネントライブラリを採用した.その後、効果が望ましくなく、コンポーネントが豊富ではなかったため、最終プロジェクトが完了した後、すべてのアップグレードには開発された
vantコンポーネントライブラリが採用された.同時にwebpackを3から4(プロジェクト構造webpack+vue+vue-store+vue-router+vant+less)に順調にアップグレードします.TOBの開発をしている多くの友人が、コンポーネントライブラリを選択していると信じています.コンポーネントライブラリには多くのスタイルが内蔵されており、開発者が便利になります.また、高度なパッケージのため、少し困っていることもあります.たとえば、vantコンポーネントライブラリのリングプログレスバーを使用する場合、公式ドキュメントを表示すると、プログレスバーの色を変更したり、レールの色を変更したり、塗りつぶしの色を変更したりします.表示文字の色は変更されていません.あいにく、私たちのニーズは文字の色を変えることです.どうしようかな?cssを書けばいいじゃないか.2.スタイルの作成
状況を説明するために、私は本稿のためにdemoをテストしました.Vueプロジェクトを初期化し、必要なvantコンポーネントライブラリを導入した場合.次に、componentsフォルダにCssScopeを新規作成します.vueの単一ファイルコンポーネント.基本コードは次のとおりです.
... コンパイル実行すると、ブラウザに90%の進捗状況のループ進捗バーが表示されます.もちろん表示文字の90%が黒で表示されていますが、今から変更します.最初は、文字の色colorは親から継承できると考えていたので、Styleラベルに次のcssスタイルを書きました.
ブラウザに戻っても文字の色は変わりません.Chromeのオープンツールで、私たちの円形の進捗バーを見つけます.このコンポーネントの内部はsvgとdivラベルで構成されており、svgは私たちの図形を表示し、divは文字を表示するために使用されていたことが分かった.このdivにはvan-circle__というclassが存在するtext.css優先度に基づいて、親で設定したフォントの色は無効です.原因を見つけたら、それはやりやすいです.このclassセレクタをStyleラベルで定義し、フォントの色を青に設定する必要があります.そこで、書いたばかりのスタイルを削除し、次のように書き換えました.
これでいいはずですが、ブラウザに戻っても効果は変わりません.黒か、黒か.このとき、chromeに戻り、開発者ツールで私たちの要素を見つけます.よく見ると、表示文字のラベルは親とは違うようで、
data-v-xxxの属性が少ないことがわかります.スタイルのscopedが幽霊をやったのかもしれないので、私たちは取り除きます.ブラウザに戻ると文字の色が変わった.喜びのあまり、どこか悪い感じがしますか?この水鬼scopedを調べなければなりません3.StyleのScopedの不思議な効果
私たちのプロジェクトは
LessをCSS前処理言語として採用しています.コンポーネントの中でscoped属性を持つStyleラベルを使用することに慣れています.scoped属性の効果は、パッケージをコンパイルした後、現在のコンポーネントが一目で見えるラベルにランダムな属性(下図data-v-97 a 9747 e)を統一的に追加することです.下図に示します.コンパイルしたcssもそのランダム属性を加える
私たちはまた問題を解決するところに戻って、
scopedを削除した後、Styleラベルの中のスタイルがグローバルになりました.これは私たちが望んでいる結果ではありません.発効しない原因は、以上の2つの図を通じて、すでに一目瞭然です.貫通しなければなりません.どうしよう?ドキュメントを探しますか?vue-loaderで探してください.4.深さ作用選択器
公式ドキュメントから、私たちがいわゆる貫通、公式は深さセレクタと呼ばれていることがわかりました.どのように使いますか.スルーしたいセレクタの前に>>>または/deep/または::v-deepを追加します.公式には>>問題がある可能性がありますが、使用後の2つをお勧めします.私たちが使用しているlessは、/deep/を選択しました.そこで、styleで削除したばかりのscoped属性を戻し、次のコードに変更しました.
ブラウザに戻ると、色が変わり、大成功しました.しかし、次の図に示すように、生成されたcssをもう一度確認する必要があります.
はい、大丈夫です.私たちが望んでいる結果です.
5.まとめ
コードを書いて、問題を調べて、正しいパスを探さなければなりません.他人のものを使って、対応する公式文書をたくさん見てください.
興味のある方は、私の微信購読番号「小庭は小さくない」に注目するか、下のQRコードをクリックして注目してください.私は長年の開発で出会った難点と、いくつかの面白い機能を、私の購読番号に一つ一つ発表することを体得しています.この文書demoは、vuescopedに公衆番号で返信する必要があります.
暇があっても大丈夫、cococos creatorを採用して小さなゲームを開発して、興味のある友达は一人で游びに来ることができます