Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten

Stil mit Gültigkeitsbereich

Zu beachten:

• Der Stil wirkt sich nicht auf andere Komponenten aus und wird nur auf die aktuelle Komponente angewendet.
• Das Stammelement einer untergeordneten Komponente wird sowohl von den Bereichsstilen der übergeordneten Komponente als auch von den Bereichsstilen der untergeordneten Komponente beeinflusst. Dies soll es der übergeordneten Komponente ermöglichen, das Layout der untergeordneten Komponente anzupassen.
• Es gibt drei spezielle Selektoren:

1. Deep Selector: kann untergeordnete Komponenten beeinflussen. Verwenden Sie eine Pseudoklasse => :deep(cls: betroffener Selector)

    .a :tief(.b) {
        ...
    }

2. Slot-Auswahl: kann den Stil des Slot-Inhalts beeinflussen. Pseudoklasse verwenden => :slotted(selector)

    :slloted(.a) {
        ...
    }

3. Globaler Selektor: Der Stil wirkt sich auf die globale Umgebung aus. Verwenden der Pseudoklasse => :global(Selektor)

    :slloted(.a) {
        ...
    }

Der Gültigkeitsbereich des Stils kann mit dem Stil

Stilmodul

Das Style-Tag enthält ein Modul. Sein Stil kann, wie der Stilbereich, nur auf die aktuelle Komponente beschränkt werden.

Diese Methode kompiliert CSS in CSS-Module und stellt sie dem Komponentenobjekt $styles zur Verfügung, um CSS-Stile zu verwenden.

<Vorlage>
  <p: Klasse = "$style.red">
    Das sollte rot sein
  </p>
</Vorlage>

<Stilmodul>
.Rot {
  Farbe: rot;
}
</Stil>

Sie können dem Modul Werte zuweisen, um den Namen des freigelegten Objekts anzupassen

<Vorlage>
  <p: Klasse = "Stil.rot">
    Das sollte rot sein
  </p>
</Vorlage>

<Stilmodul='Stil'>
.Rot {
  Farbe: rot;
}
</Stil>

Sie können die API useCssModule() verwenden, um cssModule in der kombinierten API zu verwenden.

// Gibt standardmäßig die Klasse im <style module> zurück useCssModule()

// Benennung, Rückgabe der Klasse in <style module="classes"> useCssModule('classes')

Zustandsgesteuertes dynamisches CSS

Mit v-bind() können Sie CSS-Werte dynamischen Komponentenzuständen zuordnen.

<Vorlage>
  <div class="text">hallo</div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Farbe: 'rot'
    }
  }
}
</Skript>

<Stil>
.text {
  Farbe: v-bind(Farbe);
}
</Stil>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Stilfunktion in Vue3-Einzeldateikomponenten. Weitere relevante Inhalte zur Stilfunktion von Vue3-Einzeldateikomponenten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!