Detaillierte Erklärung des Fehlers bei der Verwendung des Element-ui NavMenu-Untermenüs zur rekursiven Generierung
|
Wenn das Untermenü der Navigationsleiste rekursiv generiert wird, kann das Menü normal generiert werden. Wenn jedoch mit der Maus darübergefahren wird, wird zyklisch ein bestimmtes (MouseEnter-)Ereignis aufgerufen, was am Ende zu einem Fehler führt VerarbeitungHinweis: In Version 2.13.2 müssen Sie nur das Attribut des Untermenüs festlegen: popper-append-to-body="false", um dieses Problem zu vermeiden. Die Fehlermeldung lautet:
TestcodeVersion:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<!-- Stil importieren -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="externes nofollow" >
</Kopf>
<Text>
<div id="Wurzel">
<el-menu mode="horizontal">
<template v-for="(Menü,Index) in Menüs">
<Untermenü v-if="Menü.Kinder && Menü.Kinder.Länge" :Schlüssel="Index" :Element="Menü"></Untermenü>
<el-menu-item v-else :index="menu.path" :key="index">{{ menu.title }}</el-menu-item>
</Vorlage>
</el-Menü>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Komponentenbibliothek importieren-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<Skripttyp="text/javascript">
Vue.component('Untermenü', {
Requisiten: ['Artikel'],
Vorlage: `
<el-submenu :index="item.pfad">
<Vorlagenslot="Titel">
{{item.title}}
</Vorlage>
<template v-for="(Kind,Index) in Element.Kinder">
<Untermenü v-if="Kind.Kinder" :item="Kind" :key="index"></Untermenü>
<el-menu-item v-else :key="index" :index="child.path">
{{child.title}}
</el-Menüelement>
</Vorlage>
</el-Untermenü>
`
})
lass vm = neues Vue({
el: "#Wurzel",
Daten() {
zurückkehren {
Menüs: [{
Titel: 'Meine Werkbank',
Pfad: '2',
Kinder: [{
Titel: „Option 1“,
Pfad: '2-1'
},
{
Titel: „Option 2“,
Pfad: '2-2',
},
],
},{
Titel: „Hintergrundverwaltung“,
Pfad:'3'
}]
}
},
Komponenten: {}
})
</Skript>
</body>
</html> FehleranalyseBeachten Sie den rekursiv generierten Navigationsleistencode und Fehlercode:
handleMouseenter: Funktion(e) {
var t = dies
, i = Argumente.Länge > 1 und void 0 !== Argumente[1] ? Argumente[1] : this.showTimeout;
wenn ("ActiveXObject" im Fenster || "Fokus" !== e.Typ || e.relatedTarget) {
var n = dieses.rootMenu
, r = dies.deaktiviert;
"Klicken" === n.menuTrigger && "horizontal" === n.mode || !n.collapse && "vertikal" === n.mode || r || (this.dispatch("ElSubmenu", "mouse-enter-child"),
Zeitüberschreitung löschen(diese.Zeitüberschreitung),
dies.timeout = setzeTimeout(Funktion() {
t.rootMenu.openMenu(t.index, t.indexPath)
}, ich),
this.appendToBody && this.$parent.$el.dispatchEvent(new MouseEvent("mouseenter")));//Fehlercode}
},
Ich vermute, es liegt daran, dass das Aufsteigen oder Absinken von Ereignissen dazu führt, dass das Element wiederholt MouseEnter-Ereignisse versendet und empfängt, was zu einem Zustand ähnlich einer Endlosschleife führt. Aus Zeitgründen bin ich nicht näher darauf eingegangen. Ich werde die Grundursache später überprüfen, wenn ich Zeit habe (falls ich daran denke ...) Wenn die Maus in das Menü bewegt wird, wird die Methode handleMouseenter ausgelöst, aber weil appendToBody wahr ist, wird das Mauseingabeereignis erneut ausgelöst und kehrt dann zu dieser Methode zurück, was zu einer Endlosschleife führt. appendToBody ist eine berechnete Eigenschaft. Warum ist appendToBody also wahr? Schauen Sie sich den Code an:
{
Name: 'ElSubmenu',
Komponentenname: 'ElSubmenu',
Requisiten:{
popperAnfügenToBody: {
Typ: Boolean,
Standard: nicht definiert
}
},
berechnet:{
anfügenZuBody() {
returniere this.popperAppendToBody === undefiniert
? this.isFirstLevel //Wenn popperAppendToBody nicht explizit angegeben ist, berechnen Sie diesen Wert: this.popperAppendToBody;
},
istErstesLevel() {
sei isFirstLevel = true;
lass übergeordnetes Element = dies.$übergeordnetes Element;
während (übergeordnetes Menü && übergeordnetes Menü !== dieses.Stammmenü) {
//Berechnen, ob das aktuelle Menü die erste Ebene ist.
//Es scheint in Ordnung zu sein, da der Code angegeben hat, dass der aktuelle Komponentenname componentName: 'ElSubmenu' ist. Beim Debuggen wurde jedoch festgestellt, dass der Wert von componentName nicht definiert ist. Unabhängig von der Ebene lautet das Endergebnis also isFirstLevel = true.
if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
istErstesLevel = falsch;
brechen;
} anders {
Elternteil = Elternteil.$Elternteil;
}
}
gibt isFirstLevel zurück;
}
}
}Warum Vue diesen Parameter bei der Registrierung der Komponente nicht erfasst hat, müssen wir uns noch den Quellcode ansehen. Die Mittagspause ist vorbei und ich muss weiter codieren ... Ich werde es noch einmal analysieren, wenn ich Zeit habe ... VerarbeitungFügen Sie dem el-submenu ein Attribut hinzu: popper-append-to-body="true false", um appendToBody explizit als false anzugeben. Besondere Entschuldigungen: Die vorherige Verarbeitungsmethode wurde falsch geschrieben. Sie wurde wie folgt geschrieben: popper-append-to-body="true". Daher wird auch dann ein Fehler gemeldet, wenn dieses Attribut hinzugefügt wird. Ich entschuldige mich dafür! Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Fehlers bei der rekursiven Generierung des Element-ui NavMenu-Untermenüs. Weitere relevante Inhalte zur rekursiven Generierung des Element-ui NavMenu-Untermenüs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Detailliertes Beispiel für MySQL-Datenspeicherprozessparameter
>>: VMware Workstation 14 Pro installiert CentOS 7.0
Artikel empfehlen
So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird
1. Erstellen Sie ein neues Rabbitmq im Verzeichni...
So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung
Inhaltsverzeichnis Problemszenario: Lösung: 1. Üb...
Beispielcode zum Implementieren mehrerer Zeilenauslassungen mithilfe von drei erweiterten CSS-Methoden
Vorwort Dies ist eine alte Forderung, aber es gib...
Zusammenfassung grundlegender SQL-Anweisungen in der MySQL-Datenbank
Dieser Artikel beschreibt anhand von Beispielen d...
So sichern Sie MySQL regelmäßig und laden es auf Qiniu hoch
In den meisten Anwendungsszenarien müssen wir wic...
UCenter-Homepage fügt Statistikcode hinzu
UCenter Home ist ein von Comsenz veröffentlichtes ...
Ubuntu 18.04 Touchpad per Befehl deaktivieren/aktivieren
Unter Ubuntu kommt es häufig vor, dass sich das T...
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd
Inhaltsverzeichnis 1. React kombiniert mit Antd, ...
Detaillierte Erklärung der grundlegenden Interaktion von Javascript
Inhaltsverzeichnis 1. So erhalten Sie Elemente Ho...
Dynamischer Sternenhimmel Hintergrund umgesetzt mit CSS3
Ergebnis:Implementierungscode html <link href=...
React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen
Installieren Sie antd-mobile Globaler Import npm ...
CSS realisiert den Prozessnavigationseffekt (drei Methoden)
CSS realisiert den Prozessnavigationseffekt. Der ...
Zusammenfassung der Probleme bei der Speicherplatzfreigabe unter Linux
Die /Partitionsauslastung eines Servers im IDC is...
Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks
Der Hyperlink-Tag stellt einen Linkpunkt dar und ...