So verwenden Sie benutzerdefinierte CSS-Variablen in Vue

Die benutzerdefinierte CSS-Variablenfunktion gibt es schon lange, sie wird in der tatsächlichen Entwicklung jedoch nicht häufig verwendet. Der Grund dafür ist, dass Präprozessoren wie Less und Sass bereits über die Funktion zum Definieren von Variablen verfügen und Vue und React sehr praktisch zum Festlegen von Stilen sind. Die Leute denken möglicherweise, dass die Verwendung von CSS zum Definieren von Variablen unpraktisch und unnötig ist. Tatsächlich ist dies nicht der Fall. Nehmen wir das intuitivste Beispiel: „So verwenden Sie Vue, um den Stil von Pseudoklassen-Pseudoelementen festzulegen“. Dies ist ein jahrhundertealtes Problem. Die meisten Leute können es lösen, indem sie den Klassennamen ändern. Aber was soll ich tun, wenn viele Stile geändert werden müssen oder ich unterschiedliche Stile mit unterschiedlichen Daten rendern möchte? Heute werde ich direkt auf dieses Thema eingehen. Lassen Sie uns zunächst verstehen, was benutzerdefinierte CSS-Variablen sind. Einfache Anwendung:

<Stil>
div {
    --bg-color: pink; //Variable Farbe definieren: var (--bg-color) //Variable über var-Funktion verwenden}
</Stil>
<div>Hallo</div>

Du erhältst ein rosa Hallo. Im übergeordneten Element definierte Variablen stehen auch den untergeordneten Elementen und ihren Pseudoklassen zur Verfügung.

<Stil>
div {
    --bg-color : pink; //definiere die Variable color : var( --bg-color ); //verwende die Variable über die var-Funktion}
div:hover {
    Hintergrundfarbe: var (--bg-color);
}
div Spanne {
    Hintergrundfarbe: var (--bg-color);
}
</Stil>
<div>hallo <span>Welt</span> </div>

Die var-Funktion kann auch einen Standardwert festlegen. Sie können auch einen Standardwert festlegen, wenn die benutzerdefinierte Variable nicht gefunden werden kann.

<Stil>
div {
    Farbe: var (--bg-color, pink); // Der zweite Parameter ist der Standardwert. Hintergrundfarbe: var (--bg-color, --color, --a, red); // Sie können sogar mehrere Variablen festlegen, es wird von links nach rechts nach ihnen gesucht. }
</Stil>
<div>Hallo</div>

Damit ist die Einführung in benutzerdefinierte CSS-Variablen abgeschlossen. Sehen wir uns als Nächstes die Verwendung in Vue an. Sie können den Wert der Variablen im Style-Attribut des Tags festlegen.

<Vorlage>
	<div class="box" @click="changeColor" :style="{'--a' : a}">hallo</div>
</Vorlage>
Standard exportieren {
  Daten(){
    zurückkehren {
      a : 'blau',
    }
  },
  Methoden: {
    Farbe ändern(){
      dies.a = dies.a === 'blau' ? "rot" : "blau"
    }
  }
}
</Skript>
<Stil>
  .Kasten {
      Farbe: var(--a);
  }
  .box:hover {
    Hintergrundfarbe: var(--a);
  }
</Stil>

Wenn Sie mit der Maus über ein Div fahren und darauf klicken, ändert sich dessen Schriftfarbe und Hintergrundfarbe. An diesem Punkt werden Sie feststellen, dass Sie durch Anpassen von CSS-Variablen problemlos den Stil ändern und die Eigenschaften der Pseudoklassen direkt ändern können. Da untergeordnete Elemente die benutzerdefinierten Variablen des übergeordneten Elements gemeinsam nutzen können, können Sie die eigenen Variablen des übergeordneten Elements direkt in der untergeordneten Komponente verwenden.

// Übergeordnete Komponente <template>
	<div class="box" :style="{'--a' : a}">hallo <Child></Child></div>
</Vorlage>
Standard exportieren {
  Komponenten: {
      Kind
  },
  Daten(){
    zurückkehren {
      a : 'blau',
    }
  }
}
</Skript>

//Unterkomponente
<Vorlage>
  <span>Welt</span>
</Vorlage>

<style lang="less">
  Spanne {
      Farbe: var(--color);
  }
</Stil>

Der Effekt ist erstaunlich, wenn Sie es ausprobieren. Auf diese Weise können wir den Status der übergeordneten Komponente ändern, um den Stil der untergeordneten Komponente zu ändern und dabei die Werteübertragung zwischen der untergeordneten und der übergeordneten Komponente zu umgehen. Hinweis: Die Unterkomponente muss in der Gültigkeitsbereichsklasse bereitgestellt werden, in der die Variable verwendet werden kann.

Anhand des obigen Beispiels können wir die Zweckmäßigkeit von Unterdefinitionsvariablen erkennen. Zur einfacheren Verwendung können Sie Variablen über benutzerdefinierte Vue-Anweisungen festlegen.

   // benutzerdefinierte Vue3-Direktive.
      Funktion ändern(el,Bindung){
        für (let [Schlüssel, Wert] von Object.entries(Bindung.Wert)) {
            el.style.setProperty('--'+Schlüssel, Wert);
        }
    }
  app.direktive(css, {
        montiert(el,Bindung){
            ändern(el,bindend)
        }
        aktualisiert(el, Bindung) {
            ändern(el,bindend)
        }
       
    })

Beachten Sie, dass das Ändern von CSS-Variablen mit el.style['--color'] = 'red' ungültig ist und mit der API style.setProperty festgelegt werden muss. Nach der Auftragserteilung können wir.

<Vorlage>
	<div v-css="{a,b}" class="box" @click="changeColor"></div>
</Vorlage>
Standard exportieren {
  Daten(){
    zurückkehren {
      a : 'blau',
      b: 'rosa'
    }
  },
  Methoden: {
    Farbe ändern(){
      dies.a = dies.a === 'blau' ? "rot" : "blau"
      dies.b = dies.b === 'rosa' ? "gelb" : "rosa"
    }
  }
}
</Skript>
<Stil>
  .Kasten {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: var(--a);
  }
  .box:hover {
    Hintergrundfarbe: var(--b);
  }
</Stil>

Es erleichtert die Stilbedienung von Vue erheblich.

Darauf aufbauend habe ich einige Optimierungen und Erweiterungen vorgenommen und ein Tool bereitgestellt, welches auf npm veröffentlicht wurde. Adresse www.npmjs.com/package/vue… . Jeder ist herzlich eingeladen, es herunterzuladen und auszuprobieren. Wenn es Ihnen gefällt, können Sie es auch mit einem Stern markieren.

Oben finden Sie Einzelheiten dazu, wie Vue benutzerdefinierte CSS-Variablen verwendet. Weitere Informationen dazu, wie Vue benutzerdefinierte CSS-Variablen verwendet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!