Vollständige Schritte für dynamische Bindungssymbole in Vue

0 Unterschiede zwischen Symbolen und Bildern

Symbole sind Zeichen und Bilder sind binäre Ströme. Das heißt, Bilder werden langsamer geladen als Symbole, und es ist am besten, das img-Tag nicht zum Laden von Symbolen zu verwenden. Wir können Symbole mit der Importmethode als Komponenten importieren und sie dann als Tags importieren.

1 Installieren Sie svg

1. Führen Sie das cmd-Fenster als Administrator aus und wechseln Sie zur Ausführung in das Projektverzeichnis.

npm SVG hinzufügen

2 Icons aus der Icon-Bibliothek herunterladen

1. Alibaba-Symbolbibliothek

https://www.iconfont.cn/

2. SVG herunterladen

3. Erstellen Sie ein Symbolverzeichnis unter dem Komponentenverzeichnis und ein SVG-Verzeichnis unter den Symbolen, um gezielt Symbole zu speichern.

3 Überprüfen Sie, wie Sie das Plugin verwenden

• Alle Vue-Plugins befinden sich in node_modules
• Suchen Sie beim Herunterladen nach der README-Datei des Plugins e-cli-plugin-svg entsprechend dem Plugin-Namen

4 Anzeigesymbole

1 Definieren Sie die dynamische Komponente MyIcon.vue

1. Myicon ist eine Eigenschaft, die von der übergeordneten Komponente übergeben wird

2.computed wird verwendet, um die Symboladresse dynamisch basierend auf myicon.name (dem Namen des Symbols) zu generieren. Der Grund hierfür ist, dass beim Importieren von Komponenten außerhalb von export default{} die erhaltenen Props-Attribute nicht außerhalb von export default{} übergeben werden können. Daher wird computed verwendet, um bei der Generierung der Symbolkomponente zu helfen.

3.:style ist ein dynamisch gebundener Stil, bei dem Breite und Höhe gebunden sind. Und legen Sie den Standardwert in den Requisiten fest. Wenn die übergeordnete Komponente keine Breiten- und Höheninformationen übergibt, wird der Standardwert verwendet.

4.:fill ist an den Füllattributstil gebunden und der Standardwert wird auch in den Requisiten festgelegt.

<Vorlage>
	<div>
		<Komponente
			:ist="Symbol"
			:style="{Breite: meinIcon.width, Höhe: meinIcon.hight}"
			:fill="meinSymbol.fill"
		></Komponente>
		
	</div>
</Vorlage>

<Skript>
	
	Standard exportieren{
		Requisiten:{
			meinSymbol:{
				Name:{
					Typ: Zeichenfolge
				},
				
				Breite:{
					Typ: Zeichenfolge,
					Standard: „40px“
				},
				Höhe: {
					Typ: Zeichenfolge,
					Standard: „40px“
				},
				füllen:{
					Typ: Zeichenfolge,
					Standard: '#000000'
				}
			}
			
			

		},
			
		berechnet:{
			Symbol(){
				return () => import('@/components/icons/svg/' + dieses.meinicon.name + '.svg?inline')
			}
			
		}			
	}
</Skript>

<Stil>	

</Stil>

2 Importieren und definieren Sie die Komponente MyIcon.vue global in main.js

importiere mysvg aus '@/components/MyIcon.vue'
Vue.component('mein-Symbol',mysvg)

3 Rufen Sie my-icon als übergeordnete Komponente auf

1. Definieren Sie die Eigenschaften, die in myicon:{} übergeben werden sollen, wobei „Name“ ein Pflichtfeld ist, das den Namen des Symbols ohne Suffix angibt.

<Vorlage>
	
					<mein-Symbol
						:name = "Bereich.Zeile.Symbol"
						:Breite = "50px"
						:Höhe = "50px"
						:füllen = "#ff00ff">
					</mein-Symbol>
					
</Vorlage>

<Skript>
	
	
	
	Standard exportieren {

		Daten() {				
			zurückkehren {		
				
				meinSymbol:{					
					Name: "Position",
					Breite: "60px",
					Höhe: "60px",
					Füllung: "#ff00ff"					
				},

				

			}
		},
	}
</Skript>

<style scoped lang="weniger">	
</Stil>

Zusammenfassen

Dies ist das Ende dieses Artikels über dynamische Bindungssymbole von Vue. Weitere relevante Inhalte zu dynamischen Bindungssymbolen von 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!