So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen

Vorwort

Vor vielen Jahren war ich ein Neuling auf der Serverseite, aber als die Branche härter umkämpft wurde, war ich gezwungen, ein Neuling im Frontend-Bereich zu werden. . . Nur ein Scherz, ich lerne einfach gerne Technologie! In diesem Kapitel lernen Sie die Alibaba Iconfont-Bibliothek auf eine andere hochwertige Weise kennen. Früher mussten wir im Internet viel Zeit aufwenden, um Icon-Bilder zu finden, mit denen wir unsere Webseiten verschönern konnten. Angesichts der technologischen Entwicklung und der technischen Beiträge einiger großer Plattformen müssen wir jedoch sagen, dass Alibaba immer noch großartig ist. Das soll kein Lob oder Werbung sein. Tatsächlich sind sie in einigen Bereichen besser als Tencent. Das kann mit dem Bereich zusammenhängen. Aufgrund meiner persönlichen kognitiven Fähigkeiten kann ich das nur glauben. Beispielsweise verfügt Alibaba in Bezug auf unseren JAVA-Server über einige Open-Source-Technologien wie Nacos, Canal, RocketMQ, Dubbo und Sentinel. Zurück zum Thema. Wie der Titel schon sagt, dreht sich der Inhalt dieses Kapitels um das VUE-Frontend und die Ali Iconfont-Symbolbibliothek. Nachdem ich die Ära des Zusammensetzens von Symbolen von der Website durchgemacht hatte, begann ich zwischen 2015 und 2016, die Ali Iconfont-Symbolbibliothek zu verwenden. Am Anfang wusste ich nur, wie man Symbole zum Verwenden herunterlädt, und zwar wie folgt

Dies ist ein heruntergeladenes Bild, das ziemlich lustig ist. Später, als ich die Front-End-Technologie lernte, begann ich beim Schreiben von Uniapp zu lernen, wie man Symboldateianwendungen verwendet.

Wenn die Symbole häufig geändert werden, müssen Sie die Symboldateien häufig herunterladen und erneut importieren, was mühsam ist. In diesem Kapitel stellen wir die Ali Iconfont-Symbolbibliothek online vor, um sie dynamisch zu laden. Bei dieser Methode müssen keine Symbolsymbole oder Symboldateien heruntergeladen werden. Ich persönlich finde, dass das Praktischste ist, dass die Symbolbibliothek dynamisch aktualisiert werden kann! Und selbst wenn wir die Projektgruppe in der Ali Iconfont-Symbolbibliothek löschen, kann sie, solange die Verbindung hergestellt wurde, weiterhin im Projekt verwendet werden, aber ich weiß nicht, wie lange die Wiederherstellungszeit der Verbindung beträgt!

Beginnen Sie mit der Verwendung von Iconfont

Offizielle Website

Symbolschriftart

Symbol auswählen

Zum Projekt hinzufügen

Holen Sie sich den Link

Bisher sind die mit der Iconfont-Plattform verbundenen Vorgänge abgeschlossen. Als Nächstes folgt die bequeme Bedienung von VUE

Online-Anruftest

index.html führt den Link ein

<link rel="stylesheet" href="//at.alicdn.com/t/font_2872687_x5kgx7w5eth.css" rel="externes Nofollow" >

Schnittstellennutzung

<i class="iconfont icon-3column"></i>

Effektansicht

Test abgeschlossen!

VUE-Projektintegration

Schreiben Sie ein Tool zum Hinzufügen von Kopf

/**
 * CSS dynamisch einfügen
 */

exportiere const loadStyle = url => {
    const link = document.createElement('link')
    link.type = "text/css"
    link.rel = "Stilvorlage"
    link.href = URL
    const head = document.getElementsByTagName('head')[0]
    Kopf.AnhängenKind(Link)
}

Dies soll uns dabei helfen, das Link-Tag im Kopf hinzuzufügen. Der Effekt ist wie folgt

Hauptkonfiguration <br /> Tool zum Importieren und Laden von Links

importiere { loadStyle } aus './utils/util'

Iconfont-Verbindung initialisieren

let iconfontVersion = ['2872417_3u9w2bdk2b'];
const iconfontUrl = `//at.alicdn.com/t/font_$key.css`

Der Grund, warum hier $key verwendet wird, besteht darin, dass wir, wenn wir mehrere Symbolelemente haben, mehrere zum IconfontVersion-Array hinzufügen können.

Schreiben Sie eine Ersatz-Verbindungsmethode für $key und rufen Sie die Tool-Methode „Link hinzufügen“ auf

// Alibaba Cloud-Schriftbibliothek dynamisch laden iconfontVersion.forEach(ele => {
  Konsole.log(iconfontUrl.replace('$key', ele))
  loadStyle(iconfontUrl.replace('$key', ele))
})

Vollständiger Code

Symbolverwendung

		 <i class="iconfont icon-3column"></i>
        <i class="iconfont icon-column-4"></i>

Effektanzeige

Hier müssen wir Iconfont in das i-Tag schreiben, damit wir es optimieren können

Iconfont optimieren
Theoretisch ist es so, dass, wenn wir Iconfont-Symbole verwenden, sowohl Icon-3column als auch Icon-column-4 mit dem Präfix „Icon-“ versehen sind. Dann können wir CSS-Matching verwenden, um CSS-Overlays durchzuführen!
Schreiben Sie die Datei common.scss. Der Code lautet wie folgt

// Über die CSS-Einstellungen für Symbole [class^="icon-"] {
  Schriftfamilie: "Iconfont" !wichtig;
  /* Der folgende Inhalt bezieht sich auf die Regeln der Symbolbibliothek von Drittanbietern selbst*/
  Schriftgröße: 18px !wichtig;
  Schriftstil: normal;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
}

.avue-input-icon__item i, .avue-crud__icon--small {
  Schriftfamilie: "Iconfont" !wichtig;
  /* Der folgende Inhalt bezieht sich auf die Regeln der Symbolbibliothek von Drittanbietern selbst*/
  Schriftgröße: 24px !wichtig;
  Schriftstil: normal;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
}

.el-menu-item [Klasse^=Symbol-] {
  Rand rechts: 5px;
  Breite: 24px;
  Textausrichtung: zentriert;
  Schriftgröße: 18px;
  vertikale Ausrichtung: Mitte;
}

.el-submenu [Klasse^=Symbol-] {
  vertikale Ausrichtung: Mitte;
  Rand rechts: 5px;
  Breite: 24px;
  Textausrichtung: zentriert;
  Schriftgröße: 18px;
}

Globale Referenzen
Schreiben in die Hauptdatei

importiere './styles/common.scss'

Effektansicht

Erledigt

Dies ist das Ende dieses Artikels über VUE, das die Ali Iconfont-Symbolbibliothek online aufruft. Weitere relevante Inhalte über VUE, das die Ali Iconfont-Symbolbibliothek aufruft, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!