Elegante praktische Aufzeichnung der Einführung der Iconfont-Symbolbibliothek in Vue

Vorwort

Die ursprüngliche Absicht dieses Artikels besteht darin, Teammitgliedern die Verwendung von SVG-Sprites zur Verwaltung von Projektsymbolen zu vermitteln. Da viele Projekte in der tatsächlichen Arbeit immer noch Schriftklassen verwenden, führt dies unbewusst zu Problemen.

Nachdem die erste Phase des Projekts abgeschlossen ist, wird nach einiger Zeit in die zweite Phase eingetreten. Neue Entwicklungsanforderungen führen zwangsläufig zum Hinzufügen neuer Symbole, und die Schriftklasse erfordert die Schriftdatei des vollständig gepackten Symbols.

Selbst wenn die neue Anforderung nur ein Symbol hinzufügt, muss der Front-End-Entwickler das alte Symbol mit dem neuen Symbol zusammenführen und es neu verpacken, um eine Schriftartdatei zu generieren. Dieses Ergebnis ist inakzeptabel.
SVG-Sprites können dieses Problem perfekt lösen. Die Grundidee besteht darin, für jedes Symbol im Projekt eine SVG-Datei zu generieren, und dann entspricht die Anzahl der SVG-Dateien der Anzahl der Symbole.

Wenn du in Zukunft ein neues Icon hinzufügen möchtest, musst du lediglich eine neue SVG-Datei hinzufügen. Die vorhandenen Icons und SVG-Dateien müssen nicht einbezogen werden.
In diesem Artikel wird vue3 als grundlegendes Framework und iconfont als Symbolbibliothek verwendet, um den gesamten Prozess der Symboleinführung, -verwendung und -verwaltung Schritt für Schritt zu üben. Darüber hinaus wird in der zweiten Hälfte des Artikels auch die entsprechende Verarbeitung von SVG-Symbolen im Farbwechselmodus für mehrere Themen vorgestellt.

SVG generieren

Einführung in SVG-Sprites

SVG-Sprites-Technologie gibt es schon seit langer Zeit. Weitere Einzelheiten finden Sie in Zhang Xinxus Artikel „Die Zukunft wird heiß: Einführung in die SVG-Sprites-Technologie“ aus dem Jahr 2014.

Wir werden es hier kurz vorstellen und dann zum praktischen Teil übergehen. SVG-Sprites basieren hauptsächlich auf zwei Tag-Elementen: <symbol> und <use>.

<symbol> gruppiert Elemente. Es wird nicht auf der Benutzeroberfläche angezeigt, was dem Definieren einer Vorlage entspricht. Das <use>-Element wird zum Referenzieren und Rendern von Symbolen verwendet.

Unten sehen Sie beispielsweise ein SVG-Symbol (der Code lautet wie folgt), das die Form eines Herzens hat.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
        <Pfad füllen="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></Pfad>
</svg>

Verwenden Sie nun das Symbol-Tag, um den obigen Pfadinhalt zu umschließen. Der Code lautet wie folgt:

<svg>
    <symbol viewBox="0 0 24 24" id="Herz">
        <Pfad füllen="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></Pfad>
    </symbol>
</svg>

Als nächstes fügen Sie den mit Symbolen umschlossenen Code in die Seite ein (der Code lautet wie folgt) und fügen dann ein display: none hinzu, um ihn auszublenden. Dies entspricht der Registrierung eines Symbols mit dem ID-Namen Herz auf der Seite.

An diesem Punkt können andere Teile der Seite auf dieses Symbol verweisen. Die Referenzmethode besteht darin, ein Use-Tag in das SVG-Tag einzufügen, das xlink:href des Use-Tags mit der zu referenzierenden Symbol-ID auszufüllen und die Schnittstelle rendert eine Herzform.

<Text>
    <svg style="Anzeige: keine;">
        <symbol viewBox="0 0 24 24" id="Herz">
            <Pfad füllen="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></Pfad>
        </symbol>
    </svg>

    <svg>
        <use xlink:href="#heart" rel="external nofollow" /> <!-- Symbol verwenden -->
    </svg>
</body>

Holen Sie sich das Projektsymbol

Nachdem sie die Entwurfszeichnungen erhalten haben, durchsuchen Front-End-Studenten normalerweise alle Symbole, die für das gesamte Projekt benötigt werden.

Iconfont ist eine vom erfahrenen Team von Alibaba erstellte Vektorsymbolbibliothek, die eine große Anzahl von Symbolen enthält, die Front-End-Ingenieure auswählen und verwenden können.

Öffnen Sie die offizielle Iconfont-Website in Ihrem Browser, wählen Sie das Symbol aus, das Sie in Ihrem Projekt verwenden möchten, bewegen Sie die Maus auf das Symbol und klicken Sie auf „Zur Bibliothek hinzufügen“.

Nachdem Sie alle Symbole gesammelt haben, klicken Sie in der Navigationsleiste rechts oben auf den Einkaufswagen. Ein Popup-Fenster wird angezeigt. Klicken Sie auf „Zum Projekt hinzufügen“. Nachdem bestätigt wurde, dass alle Symbole zum Projekt hinzugefügt werden sollen, springt die Seite automatisch zur Seite unter „Ressourcenverwaltung“ in der Navigationsleiste – „Mein Projekt“ (siehe unten).

Unser Ziel ist es, die SVG-Datei zu generieren, die dem Symbol entspricht. Daher müssen wir hier einige Einstellungen vornehmen. Öffnen Sie die Projekteinstellungsoption im obigen Bild. Das Popup-Fenster sieht wie unten gezeigt aus.

Lassen Sie in der Popup-Spalte für das Schriftformat nur die Option SVG aktiviert und deaktivieren Sie die anderen. Klicken Sie nach dem Einstellen auf die Schaltfläche Speichern.

Die Seite wird zu diesem Zeitpunkt aktualisiert. Klicken Sie dann auf der Seite auf die Schaltfläche „Lokal herunterladen“, um die SVG-Dateien aller Symbole herunterzuladen und zu dekomprimieren. Die dekomprimierte Dateistruktur ist wie unten dargestellt.

Wenn wir die Dateistruktur in der obigen Abbildung betrachten, stellen wir fest, dass alle SVG-Symbolcodes in der Datei iconfont.svg geschrieben sind, was nicht unseren Erwartungen entspricht. Wir hoffen, dass ein Symbol einer SVG-Datei entspricht, anstatt alle wie jetzt in einer Datei zu speichern.

Obwohl Iconfont derzeit keinen Mechanismus zur Dateitrennung bereitstellt, können wir andere Plattformen nutzen, die uns dabei helfen, die zusammengeführten SVG-Dateien in einzelne Dateien zu trennen.

Die Iconmoon-Website verfügt über diese Funktion und ist auch eine Icon-Bibliotheks-Website ähnlich wie Iconfont.

Öffnen Sie die offizielle Website von iconmoon im Browser, wählen Sie rechts in der oberen Navigationsleiste die IcoMoon-App aus, um die Symbolauswahlseite aufzurufen, klicken Sie links in der Navigationsleiste der Seitenkopfzeile auf „Symbole importieren“ und importieren Sie die von iconfont heruntergeladene Datei iconfont.svg. Das Ergebnis ist wie unten dargestellt.

In der Spalte „Iconfont“ können Sie sehen, dass das importierte Symbol auf der Seite angezeigt wird. Klicken Sie anschließend mit der Maus auf das importierte Symbol, um es als ausgewählt zu markieren, und klicken Sie dann auf die Schaltfläche „SVG & mehr generieren“ in der unteren linken Ecke der Seite (wie unten gezeigt).

Nach dem Klicken auf die Schaltfläche springt die Seite. Klicken Sie zu diesem Zeitpunkt noch auf die Schaltfläche „Herunterladen“ in der unteren linken Ecke (siehe unten), um das Symbol herunterzuladen.

Nach dem Herunterladen entpacken Sie das Verzeichnis. Im entpackten Verzeichnis wird ein SVG-Ordner angezeigt. Wenn Sie den Ordner öffnen, werden Sie feststellen, dass alle Symbole in einzelne Dateien aufgeteilt wurden (wie unten gezeigt).

Projekt-Setup

Die SVG-Datei wurde erfolgreich abgerufen. Erstellen Sie nun einen neuen Ordner „Fonts“ und einen Unterordner „Fonts/SVG“ in der Vue3-Projektverzeichnisstruktur „SRC“ -> „Assets“-Ordner und legen Sie alle oben generierten SVG-Einzeldateien in „Fonts/SVG“ ab.
Die Dateieinstellungen sind abgeschlossen. Beginnen wir nun mit der Konfiguration des Projekts, damit Vue3 Symbole reibungslos verwalten und verwenden kann.

• Der erste Schritt besteht darin, eine Befehlszeile im Stammverzeichnis des Projekts zu öffnen und npm i svg-sprite-loader -D auszuführen. Wir müssen die Abhängigkeit svg-sprite-loader installieren, da sie den Code der SVG-Datei automatisch in Symbol-Tags einfügen kann.
• Der zweite Schritt besteht darin, eine neue Datei vue.config.js im Stammverzeichnis des Projekts zu erstellen. Studenten, die mit Vue vertraut sind, sollten wissen, dass vue.config.js zum Konfigurieren der Build-Umgebung verwendet wird.

Detaillierte Konfigurationsparameter von vue.config.js finden Sie auf der offiziellen Vue-CLI-Website. Hier müssen wir nur wissen, wie der SVG-Sprite-Loader konfiguriert wird.

Wie wir alle wissen, basiert die Konstruktionsumgebung von vue-cli auf webpack. Durch Hinzufügen verschiedener Konfigurationsparameter zur Datei vue.config.js führt vue-cli diese Parameter schließlich in die Webpack-Konfiguration ein.

Auf diese Weise können wir das Ziel erreichen, die Entwicklungsumgebung über vue.config.js zu konfigurieren, ohne die Webpack-Konfigurationsdatei direkt zu bedienen.

Die Abhängigkeit svg-sprite-loader wurde installiert. Jetzt müssen wir diesen Loader in die Webpack-Konfiguration laden. Dies kann erreicht werden, indem der folgende Code in vue.config.js eingefügt wird.

const resolve = require("Pfad").resolve;

modul.exporte = {
   chainWebpack(Konfiguration){
        //Symbol einführen config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("Symbol").test(/\.svg$/)
        .include.add(auflösen("./src/assets/fonts/svg")).ende()
        .verwenden("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .Optionen({
            symbolId:'Symbol-[Name]'
        });
   }
}

Studenten, die die Webpack-Konfiguration systematisch studiert haben, können die Bedeutung des obigen Codes leicht erkennen. Der obige Code schließt zuerst den in der Regel festgelegten SVG-Regelsatz aus dem Verzeichnis "./src/assets/fonts/svg" aus.

Fügen Sie dann ein neues Regelsymbol hinzu, um das Verzeichnis „./src/assets/fonts/svg“ einzuschließen. Dies ist der Ordner, in dem wir alle SVG-Dateien speichern.

Der Code verwendet dann .use und .loader, um svg-sprite-loader in der Projektumgebung zu konfigurieren und setzt die Symbol-ID auf icon-[name].

Die Symbol-ID bezieht sich hier auf den ID-Namen, der vom Tag <symbol> generiert wird. Wenn die Symbol-ID auf icon-[name] gesetzt ist, wird das Symbol vom Tag <use> auf der Seite mit icon- plus dem Dateinamen referenziert.

• Der dritte Schritt besteht darin, unter Assets/Fonts eine neue Datei index.js zu erstellen (die Dateistruktur ist wie unten dargestellt) und die folgenden zwei Codezeilen einzufügen.

Diese beiden Codezeilen verwenden hauptsächlich die Funktion require.context in webpack, die uns dabei helfen kann, Dateimodule automatisch einzuführen.

Der erste Parameter von require.context stellt das Zieldateiverzeichnis dar, der zweite Parameter gibt an, ob auf Unterordner angewendet werden soll, und der dritte Parameter entspricht dem Dateiformat.

const load = require.context("./svg",false,/\.svg$/);
lade.keys().map(laden);

Nachdem require.context ausgeführt wurde, gibt es das Ergebnis load zurück. Der Rückgabewert load selbst ist eine Funktion, die das Modul einführt. Darüber hinaus enthält es auch ein keys-Attribut. Das durch Ausführen von load.keys() zurückgegebene Ergebnis lautet wie folgt.

 ["./arrow.svg", "./arrowon.svg", "./downarrow.svg", "./jiantou.svg", "./trash.svg", "./yiwenicon.svg"]

Wir können hier sehen, dass load.keys() die relativen Pfade aller Symbole im Ordner „fonts/svg“ zurückgibt und dann die Funktion loda verwendet, um die Dateien in diese Pfade zu laden, sodass alle Dateien mit der Endung .svg im Ordner „fonts/svg“ dynamisch importiert werden können.

Wenn Sie in Zukunft ein neues Symbol hinzufügen müssen, laden Sie zuerst eine einzelne SVG-Datei von der Iconfont-Website herunter und legen Sie sie dann in den Ordner „Fonts/SVG“ ab, um sie automatisch zu importieren.

Der letzte Schritt besteht darin, im dritten Schritt die neu erstellte index.js in der Einstiegsdatei main.js des Projekts aufzurufen, um alle svg-Dateien automatisch zu importieren (der Code lautet wie folgt).

importiere { createApp } aus „vue“;
importiere App von './App.vue'; // Stammkomponente importiere "@/assets/fonts/index"; // Automatischer Import importiere Router von '@/router/index'; // Routing createApp(App).use(router).mount('#app');

Mit den oben genannten vier Schritten ist die Konfiguration des Projekts grundsätzlich abgeschlossen, und der gesamte Betriebsvorgang kann einfach geregelt werden.

Nachdem die Eintragsdatei main.js gestartet wurde, führen Sie asset/fonts/index.js aus, um den automatischen Import aller SVG-Dateien zu starten.

Sobald der svg-sprite-loader erkennt, dass eine Datei mit der Endung .svg in das Projekt eingeführt wird, kapselt er den gesamten Codeinhalt dieser SVG in <symbol>-Tags (wie unten gezeigt) und fügt sie dann gemeinsam in das Seitendokument ein.

Dies entspricht dem SVG-Sprite-Loader, der uns hilft, alle SVG-Symbole auf der Seite zu registrieren. Der Rest unserer Arbeit besteht darin, auf die Symbole auf der Seite zu verweisen.

Symbolreferenz

Wir füllen den folgenden Code auf der Startseite aus (der Effekt ist wie folgt). Weisen Sie dem Attribut xlink:href die Zeichenfolge zu, die durch Verketten des Präfixes #icon- und des entsprechenden Dateinamens unter fonts/svg gebildet wird, und das der Datei entsprechende Symbol wird gerendert.

<Vorlage>
  <div Klasse="Startseite">
    <p class="title">Hallo Welt</p>
    <svg>
        <use xlink:href="#icon-trash" rel="external nofollow" /> <!-- Symbol verwenden -->
    </svg>
  </div>
</Vorlage>

Komponentenreferenz

Die Verwendung von SVG und Tags zum Verweisen auf Symbole auf der Seite ist nicht sehr elegant. Wir können es in eine Komponente umwandeln.

Erstellen Sie eine neue Datei Icon/index.vue im globalen Komponentenordner „components“. Diese Komponente akzeptiert zwei Parameter: Name und Farbe (der Code lautet wie folgt).

Der Parametername entspricht dem zu rendernden Symbolnamen und Farbe ist die zu rendernde Farbe. Hierbei ist zu beachten, dass die Farbe von SVG nur über das Füllattribut geändert werden kann und dies nicht funktioniert, wenn das Farbattribut zugewiesen ist.

<Vorlage>
    <svg :style="{Füllung:Farbe?Farbe:''}">
        <use :xlink:href="'#icon-'+name" rel="externes nofollow" rel="externes nofollow" />
    </svg>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten:{
     Name:String, //Symbolname Farbe:{ //Symbolfarbe Typ:String,
         Standard: null
     }
 }
}
</Skript>

Verweisen Sie nun auf die Symbolkomponente auf der Startseite (der Code lautet wie folgt).

Das gerenderte Symbol heißt „Papierkorb“ und hat die Farbe Blau (siehe Abbildung unten).

<Vorlage>
  <div Klasse="Startseite">
    <p class="title">Hallo Welt</p>
    <Icon name="trash" color="blue"/><!-- Symbol verwenden-->
  </div>
</Vorlage>
<Skript>
Symbol aus „@/components/Icon/index“ importieren;
Standard exportieren {
    Komponenten: {
        Symbol
    }
}
</Skript>

Unterstützung mehrerer Designs

Aus der obigen Erklärung können wir erkennen, dass sich die endgültige Symbolfarbe ändert, wenn wir dem <svg>-Tag das Stilattribut „Füllung“ zuweisen. Dadurch können wir die Entwicklungsanforderungen mehrerer Designs erfüllen.

Als nächstes erstellen wir eine Szene, in der wir die Themen online per Knopfdruck wechseln können, so dass sich beim Themenwechsel auch das SVG-Symbol ändern kann.

Konfigurieren mehrerer Design-Stile

Erstellen Sie zunächst eine neue Datei scss/variable.scss im Projektordner src/assets. Der Codeinhalt ist wie folgt.

Der Code definiert drei Designs: Standarddesign, Design 1 und Design 2. Jedes Design definiert seine eigene Symbolfarbe und Hintergrundfarbe.

Der untere Teil des Codes definiert drei Mixins, die zum Festlegen der Eigenschaften „Füllung“, „Farbe“ und „Hintergrundfarbe“ verwendet werden. In jedem Mixin verwenden die von verschiedenen Designs festgelegten Farben die Farbeinstellungen ihres eigenen Designs.

//Standarddesign $icon-color:red;
$Hintergrundfarbe:#fff;

// Thema 1
$icon-color1:grau;
$Hintergrundfarbe1:#eee;

// Thema 2
$icon-color2:blau;
$Hintergrundfarbe2:#999;

// Wird verwendet, um SVG mit Farbe zu füllen @mixin fill {
    fill:$icon-color; //Standardfarbe verwendet das Standarddesign [data-theme = "theme1"] & { //Farbe beim Wechsel zu Design 1 fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //Farbfüllung beim Wechsel zu Design 2: $icon-color2;
    }
}
//Setze das Farbattribut @mixin color {
    color:$icon-color; //Standardfarbe verwendet das Standarddesign [data-theme = "theme1"] & { //Farbe beim Wechsel zu Design 1 color:$icon-color1;
    }
    [data-theme = "theme2"] & { //Farbe beim Wechsel zu Design 2 color:$icon-color2;
    }
}

//Hintergrundfarbe festlegen @mixin backgroudColor {
    background-color:$background-color; //Standardfarbe verwendet das Standarddesign [data-theme = "theme1"] & { //Farbe beim Wechsel zu Design 1 background-color:$background-color1;
    }
    [data-theme = "theme2"] & { //Farbe beim Wechsel zu Design 2 background-color: $background-color2;
    }
}

variable.scss ist eine globale Konfigurationsdatei für mehrere Designs, mit der Sie nicht nur die Farben konfigurieren können, die in jedem Design gerendert werden sollen, sondern auch die Schriftgröße, die häufig verwendete Breite und Höhe usw.

Nachdem die Konfigurationsdatei geschrieben wurde, ist es nun notwendig, diese Datei auf das Projekt zu verweisen. Öffnen Sie dazu die Projektkonfigurationsdatei vue.config.js im Stammverzeichnis im Editor und fügen Sie den folgenden Code ein.

const resolve = require("Pfad").resolve;

modul.exporte = {
   chainWebpack(Konfiguration){
        //Symbol einführen config.module.rule("svg").exclude.add(resolve("./src/assets/fonts/svg"));
        config.module.rule("Symbol").test(/\.svg$/)
        .include.add(auflösen("./src/assets/fonts/svg")).ende()
        .verwenden("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .Optionen({
            symbolId:'Symbol-[Name]'
        });
   },
   css: {
    loaderOptions: {
        scss: {
            prependData: `@import "@/assets/scss/variable.scss";`
        },
    }
   } 
}

Fügen Sie in module.exports eine neue Konfigurationseigenschaft CSS hinzu und füllen Sie dann den Pfad der Multi-Theme-Konfigurationsdatei, die wir oben geschrieben haben, in den entsprechenden Wert von prependData aus.

Um Fehler beim Dateiimport aufgrund unterschiedlicher Sass-Versionen zu vermeiden, vereinheitlichen Sie die Versionen von Sass und Sass-Loader.

"sass": "1.26.5",
"sass-loader": "8.0.2",

Nachdem vue.config.js konfiguriert ist, starten Sie die Anwendung neu. variable.scss wurde global in die Anwendung eingefügt. Als Nächstes müssen wir @import nicht verwenden, um die Designkonfigurationsdatei in die Seitenkomponente zu importieren. Die in variable.scss definierten Variablen und Mixins können direkt verwendet werden.

Symboltransformation

Damit das Symbol auf die Designänderung reagiert, wird die globale Symbolkomponente wie folgt geändert. Wenn die Farbeigenschaft einen Wert hat, wird das Symbol entsprechend der übergebenen Farbe gerendert. Wenn keine Farbe übergeben wird, wird der Faktor, der die Symbolfarbe bestimmt, zum Klassennamensymbol.

<Vorlage>
    <svg Klasse="Symbol" :style="{Füllung:Farbe?Farbe:''}">
        <use :xlink:href="'#icon-'+name" rel="externes nofollow" rel="externes nofollow" />
    </svg>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten:{
     Name:Zeichenfolge,
     Farbe:{
         Typ: Zeichenfolge,
         Standard: null
     }
 }
}
</Skript>

<style lang="scss" scoped>
 .Symbol{
   @include füllen;
 }
</Stil>

Der dem Füllen entsprechende Mixin wird im Klassennamensymbol aufgerufen und die Definition von Füllen in der Datei variable.scss lautet wie folgt.

Schließlich wird die Eigenschaft fill:color zurückgegeben. Standardmäßig ist der Füllfarbenwert $icon-color.

Wenn der Wert des Attributs data-theme im HTML-Tag des Seitendokuments zu theme1 wird, wird die von fill gerenderte Farbe zu der von Theme 1 definierten Farbe. Ebenso wird beim Wechsel zu theme2 die von fill gerenderte Farbe zu der von Theme 2 definierten Farbe.

// Wird verwendet, um SVG mit Farbe zu füllen @mixin fill {
    fill:$icon-color; //Standardfarbe verwendet das Standarddesign [data-theme = "theme1"] & { //Farbe beim Wechsel zu Design 1 fill:$icon-color1;
    }
    [data-theme = "theme2"] & { //Farbfüllung beim Wechsel zu Design 2: $icon-color2;
    }
}

Wir können den Zweck der obigen Konfiguration verstehen, indem wir die DOM-Struktur beobachten, die schließlich von der Seite generiert wird. @mixin generiert schließlich ein Stylesheet für jedes Design (wie unten gezeigt). Auf diese Weise wird das Stylesheet des entsprechenden Designs wirksam, solange das Datendesign des <html>-Tags einem bestimmten Design entspricht.

Seitenüberprüfung

Füllen Sie den folgenden Code in die Startseitenkomponente aus. Der Originalseite werden drei Schaltflächen hinzugefügt: Standarddesign, Design 1 und Design 2.

Durch Klicken auf die Schaltfläche wird die Funktion updateTheme ausgelöst, die den Attributwert des Datenthemas im Tag <html> ändert und so die Funktion zum Umschalten des Themas realisiert (das Effektdiagramm ist wie folgt).

<Vorlage>
  <div Klasse="Startseite">
    <p class="title">Hallo Welt</p>
    <Icon name="trash"/><!-- Symbol verwenden-->
    <button @click="updateTheme()">Standarddesign</button>
    <button @click="updateTheme('theme1')">Thema 1</button>
    <button @click="updateTheme('theme2')">Thema 2</button>
  </div>
</Vorlage>
<Skript>
Symbol aus „@/components/Icon/index“ importieren;
Standard exportieren {
    Komponenten: {
        Symbol
    },
    Methoden: {
        aktualisierenTheme(Name){
            if(name == null){ // Standardthema verwendendocument.documentElement.removeAttribute("data-theme");
            }anders{
                document.documentElement.setAttribute("Datenthema",Name);
            }
        } 
    },
}
</Skript>
<style scoped lang="scss">
.heim{
    Höhe: 100%;
    @include Hintergrundfarbe;
}
.Titel{
  @Farbe einschließen;
}
</Stil>

Endergebnis:

Schlussworte

Die oben beschriebene Multi-Theme-Implementierung ist sehr einfach zu bedienen, eignet sich jedoch nicht für große und komplexe Projekte.

Stellen Sie sich vor, ein großes Projekt enthält mehr als ein Dutzend Designs und der CSS-Code unter jedem Design ist sehr umfangreich. Dann ist es nicht sinnvoll, alle Stilcodes unter allen Designs auf einmal in die Anwendung einzufügen.

Die beste Vorgehensweise besteht darin, dass, wenn der Benutzer per Klick zu einem bestimmten Designtyp wechselt, der Stil dieses Designtyps bei Bedarf geladen und dann zur Darstellung in die Anwendung eingefügt wird. Dies kann die Gesamtleistung erheblich verbessern. Informationen zu den besten Vorgehensweisen finden Sie in den Artikeln zum Wechseln zwischen mehreren Designs in der Community.

Dies ist das Ende dieses Artikels über die Einführung der Iconfont-Symbolbibliothek durch Vue. Weitere relevante Inhalte zur Einführung von Iconfont durch Vue 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!

Quellcode