Implementierung der CSS-Variableneinfügung im Vue3-Stil

Zusammenfassung

Unterstützung für die Verwendung von komponentenstatusgesteuerten CSS-Variablen (benutzerdefinierte CSS-Eigenschaften) in Einzeldateikomponentenstilen.

Einfaches Beispiel

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

<Skript>
  Standard exportieren {
    Daten() {
      zurückkehren {
        Farbe: 'rot',
        Schriftart:
          Größe: '2em',
        },
      }
    },
  }
</Skript>

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

    /* Ausdrücke (in Anführungszeichen setzen) */
    Schriftgröße: v-bind ('Schriftgröße');
  }
</Stil>

Motivation

Vue SFC-Stile bieten eine unkomplizierte CSS-Kollokation und -Kapselung, sind jedoch rein statisch. Dies bedeutet, dass wir derzeit nicht in der Lage sind, Stile zur Laufzeit dynamisch basierend auf dem Status der Komponente zu aktualisieren.

Da die meisten modernen Browser native CSS-Variablen unterstützen, können wir diese mittlerweile nutzen, um Komponentenstatus und -stile einfach zu verbinden.

Designdetails

Tags in SFC unterstützen jetzt eine benutzerdefinierte CSS-Funktion v-bind:

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

Wie erwartet wird dadurch der deklarierte Wert an die Eigenschaftsfarbe im Komponentenstatus gebunden, reaktiv.Farbe

Die Funktion kann beliebige JavaScript-Ausdrücke unterstützen, aber da JavaScript-Ausdrücke ungültige Zeichen in CSS-Bezeichnern enthalten können, müssen sie in den meisten Fällen in Anführungszeichen gesetzt werden: v-bind

.text {
  Schriftgröße: v-bind ('theme.font.size');
}

Wenn eine solche CSS-Variable erkannt wird, führt der SFC-Compiler Folgendes aus:

Überschreiben Sie es durch einen nativen Namen mit einem gehashten Variablennamen. Der obige Inhalt wird wie folgt umgeschrieben: v-bind () var ()

.text {
  Farbe: var (--6b53742-color);
  Schriftgröße: var (--6b53742-theme_font_size);
}

Beachten Sie, dass der Hash in allen Fällen angewendet wird, unabhängig davon, ob das Tag einen Gültigkeitsbereich hat oder nicht. Dies bedeutet, dass eingefügte CSS-Variablen nicht versehentlich in untergeordnete Komponenten gelangen können.

Die entsprechenden Variablen werden als Inline-Stile in das Stammelement der Komponente eingefügt. Im obigen Beispiel sieht der endgültig gerenderte DOM folgendermaßen aus:

<div style="--6b53742-color:red;--6b53742-theme_font_size:2em;" Klasse="text">
  Hallo
</div>

Die Injektion ist reaktionsfähig – wenn sich also die Eigenschaften einer Komponente ändern, werden die eingefügten CSS-Variablen entsprechend aktualisiert. Dieses Update ist unabhängig vom Template-Update der Komponente, d.h. Änderungen an einer reinen CSS-responsiven Eigenschaft lösen kein erneutes Rendern des Templates aus.

Details zur Zusammenstellung

Um CSS-Variablen einzufügen, muss der Compiler den folgenden Code generieren und in das Setup() der Komponente einfügen:

importiere { useCssVars } von 'vue'

Standard exportieren {
  aufstellen() {
    //...
    useCssVars(_ctx => ({
      Farbe: _ctx.color,
      Thema_Schriftgröße: _ctx.Thema.Schriftgröße,
    }))
  },
}

... Hier richtet der Laufzeithelfer einen DOM.useCssVars-watchEffect ein, der die Variable reaktionsfähig anwendet.

Diese Kompilierungsstrategie erfordert, dass beim Kompilieren eines Skripts zunächst eine einfache Neukodierungsanalyse des Tag-Inhalts durchgeführt wird, um die Liste der anzuzeigenden Variablen zu bestimmen. Allerdings verursacht diese Analysephase nicht so viel Aufwand wie die vollständige AST-basierte Analyse von <style>.

In der Produktion können Variablennamen weiter gehasht werden, um den CSS-Fußabdruck zu reduzieren.

.text {
  Farbe: var (--x3b2fs2);
  Schriftgröße: var (--29fh29g);
}

Der entsprechend generierte JavaScript-Code verwendet dementsprechend denselben Hashwert.

Einführungsstrategie

Dies ist eine neue Funktion, die vollständig abwärtskompatibel ist. Wir sollten jedoch klarstellen, dass es auf nativen CSS-Variablen basiert, sodass Benutzer sich über die Bandbreite der Browserunterstützung im Klaren sein müssen.

üben

Deklarieren Sie im Skript zwei responsive Eigenschaften, nämlich wallpaperBlur und wallpaperMask. „wallpaperBlur“ gibt den Unschärfegrad des Hintergrundbilds an und „wallpaperMask“ gibt die Transparenz der Maske an. Wenn wir sie über v-bind auf den Stil anwenden, bedeutet das, dass der Stil auf die Änderung reagiert, wenn wir diese beiden Werte im Skript ändern.

// Skript
const wallpaperBlur = ref('0px')
const wallpaperMask = ref('rgba(0, 0, 0, 0)')

//Stil
.Hintergrundbild {
  Filter: Unschärfe (v-bind(wallpaperBlur));
  unten: calc(v-bind(wallpaperBlur) * -2);
  links: calc(v-bind(wallpaperBlur) * -2);
  rechts: calc(v-bind(wallpaperBlur) * -2);
  oben: calc(v-bind(wallpaperBlur) * -2);
  .Hintergrundbild {
    Übergang: Hintergrundbild 0,6 s, Hintergrundfarbe 0,4 s;
  }
  .Tapetenmaske {
    Hintergrundfarbe: v-bind(wallpaperMask);
  }
}

Hinweis

Binden Sie die entsprechenden Eigenschaften

Im obigen Beispiel könnten Sie meinen, dass zum Ändern der Transparenz der Maske lediglich eine Zahl zwischen 0 und 1 angegeben und diese dann im folgenden Stil geschrieben werden muss:

.Tapetenmaske {
  Hintergrundfarbe: rgba(0, 0, 0, v-bind(wallpaperMask));
}

Wie oben erwähnt, wird der v-bind-Stil während der Kompilierungsphase als CSS-Variablen umgeschrieben. Der obige Code wird wie folgt umgeschrieben:

.Tapetenmaske {
  Hintergrundfarbe: rgba(0, 0, 0, var (--[hash]-wallpaper_mask));
}

rgba(0, 0, 0, var (--[hash]-wallpaper_mask)) kann in CSS nicht analysiert werden. Aus diesem Grund wird der Anfangswert von WallpaperMask als rgba(0, 0, 0, 0) deklariert. Dies ist ein sehr wichtiger Punkt, den es zu beachten gilt, und es gibt viele ähnliche Situationen in CSS.

Beachten Sie die Aktualisierung des Stils

Die entsprechenden, in den Entwurfsdetails genannten Variablen werden als Inline-Stile in das Stammelement der Komponente eingefügt. Das endgültig gerenderte DOM sieht folgendermaßen aus:

<div Stil="--6b53742-color:red;--6b53742-theme_font_size:2em;"></div>

Wenn Sie die in <style> gebundenen Eigenschaften in <script> ändern, reagieren die CSS-Variablen im Inline-Stil auf die Änderungen. Sie können jedoch keine einzelne CSS-Variable in einem Inline-Stil aktualisieren. Dies bedeutet, dass die Aktualisierung eines „dynamischen Stils“ in einer Komponente dazu führt, dass alle Inline-Stile in der Stammkomponente aktualisiert werden. Wenn der Wert des Style-Attributs eine große Anzahl von CSS-Variablen enthält, müssen Sie eine Neuorganisation Ihrer Komponente in Betracht ziehen. Da die kompilierten CSS-Variablen als Inline-Stile in das Stammelement der Komponente eingefügt werden, können wir dieses Verhalten nicht steuern und eine CSS-Variable, die eine Aktualisierung verursacht, nicht von anderen CSS-Variablen entkoppeln.

Stellen Sie sich eine Situation vor, in der die kompilierten CSS-Variablen im Stil eine CSS-Variable enthalten, deren Wert sehr groß ist (Base64). Wenn andere CSS-Variablen in der Komponente aktualisiert werden, wird der gesamte Stil aktualisiert, was zusätzlichen Hardware-Overhead verursacht. Wir müssen die Komponente trennen, die die Base64-CSS-Variable generiert, damit die CSS-Variable in das Stammelement der Komponente eingefügt werden kann und nicht von Aktualisierungen anderer CSS-Variablen betroffen ist.

Verweise

https://github.com/vuejs/rfcs/pull/231

Dies ist das Ende dieses Artikels über die Implementierung der CSS-Variableneinfügung im Vue3-Stil. Weitere relevante Inhalte zur CSS-Variableneinfügung im Vue3-Stil 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!