Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue

Vorwort

Bei der Projektentwicklung gibt es viele Möglichkeiten, Symbole zu verwenden. Sie können geeignete Symbole auf Iconfont finden und sie über http verwenden oder direkt herunterladen. Hier zeige ich Ihnen eine Möglichkeit, Symbole durch die Implementierung benutzerdefinierter Komponenten einzuführen.

Erstellen der Umgebung

Hier erstellen wir ein neues Projekt über @vue/cli 4.5.13 und müssen der Einfachheit halber die Abhängigkeit svg-sprite-loader installieren, um die entsprechenden svg-Symbole zu verarbeiten.

Installation: npm install --save-dev svg-sprite-loader

Konfigurieren Sie vue.config.js

Erstellen Sie nach der Installation von svg-sprite-loader eine neue vue.config.js, um Abhängigkeiten zu konfigurieren:

// vue.config.js
const { lösen } = erfordern ('Pfad')

modul.exporte = {
  chainWebpack(Konfiguration) {
    Konfiguration
      .Modul
      .regel('svg')
      .ausschließen
      .add(auflösen('src/icons'))
      .Ende()
    Konfiguration
      .Modul
      .regel('Symbole')
      .prüfung(/\.svg$/)
      .enthalten
      .add(auflösen('src/icons'))
      .Ende()
      .verwenden('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .Optionen({
        symbolId: 'Symbol-[Name]'
      })
  }
}

Hier sind zwei über chainWebpack vorgenommene Konfigurationen:

• Die erste besteht darin, zu verhindern, dass die ursprünglichen anderen Abhängigkeiten, die SVG verarbeiten, unsere benutzerdefinierten Symboldateien unter src/icons verarbeiten.
• Die benutzerdefinierte Symboldatei wird vom SVG-Sprite-Loader verarbeitet. Die Einstellungen in den Optionen geben an, dass die Symbol-ID des generierten SVG die Verkettung des Symbols und des Dateinamens ist.

Erstellen einer neuen Symbolkomponente

Erstellen Sie eine neue Datei SvgIcon.vue im Komponentenverzeichnis:

<Vorlage>
  <i Klasse="Symbol">
    <!-- aria-hidden, um Menschen mit Behinderungen das Lesen zu erleichtern (das Gerät überspringt dieses Tag beim Lesen des Inhalts, um Verwirrung zu vermeiden) -->
    <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">
      <use :xlink:href="iconName" rel="external nofollow" ></use>
    </svg>
  </i>
</Vorlage>

<script lang="ts">
importiere { PropType, toRefs } von 'vue'

Standard exportieren {
  Requisiten: {
    Größe: {
      Typ: Zahl als PropType<Zahl>,
      Standard: 14
    },
    Füllfarbe: {
      Typ: String als PropType<string>,
      Standard: „#000“
    },
    Symbolname:
      Typ: String als PropType<string>,
      erforderlich: true
    }
  },
  setup(Eigenschaften: beliebig) {
    const { Größe, Füllfarbe, Symbolname: _Symbolname } = toRefs(Eigenschaften)
    const iconName = `#${_iconName.value}`

    zurückkehren {
      Größe,
      Füllfarbe,
      Symbolname
    }
  }
}
</Skript>

Erstellen Sie dann ein neues Symbolverzeichnis und eine neue Indexdatei, die an die Komponente angehängt wird, und importieren Sie das SVG-Symbol:

// index.ts
Importiere SvgIcon aus '@/components/SvgIcon.vue'
importiere { App } von 'vue'

exportiere Standard (App: App) => {
  app.component('svg-icon', SvgIcon)
}

const ctx = require.context('./svg', false, /\.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)

AnfrageAlle(ctx)

//main.ts
importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere installSvgIcon aus '@/icons/index'

const app = createApp(App)

installSvgIcon(App)
app.mount('#app')

Diese Datei hat zwei Aufgaben:

1. Mounten Sie die globale Komponente svg-icon, indem Sie eine Methode exportieren.
2. Verwenden Sie require.context, um Symboldateien automatisch in das SVG-Verzeichnis zu importieren.

Verwenden von Komponenten

Zuerst müssen wir die SVG-Symboldatei im Verzeichnis icons/svg speichern (suchen Sie die gewünschte Datei auf iconfont).

Dann können Sie es woanders verwenden:

<Vorlage>
  <img alt="Vue-Logo" src="./assets/logo.png">
  <svg-icon Symbolname="Symbol-Dashboard"></svg-icon>
  <HelloWorld msg="Willkommen bei Ihrer Vue.js + TypeScript-App"/>
</Vorlage>

Führen Sie es direkt über die Komponente SVG-Icon ein und übergeben Sie dann den Icon-Namen. Der Wert des Icon-Namens besteht aus dem mit dem SVG-Dateinamen verknüpften Icon.

Zusammenfassen

Diese benutzerdefinierte Methode zum Einführen von SVG-Symbolen ist recht praktisch. Wenn Sie ein Symbol hinzufügen möchten, können Sie dies in wenigen Schritten tun:

1. Laden Sie die SVG-Datei direkt herunter und legen Sie sie im entsprechenden Verzeichnis ab.
2. Importieren Sie es dann über die SVG-Symbolkomponente.

Es ist jedoch nicht sehr praktisch, den Stil über CSS zu ändern.

Damit ist der Artikel zum Einführen von Symbolen auf Grundlage der benutzerdefinierten Komponenten von Vue abgeschlossen. Weitere Informationen zu den benutzerdefinierten Symbolkomponenten von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!