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
CSS-Positionierungslayout (Position, Positionierungslayoutfähigkeiten)
1. Was ist Positionierung? Das Positionsattribut ...
Der Typ der Schaltfläche ist nicht als „Senden“ angegeben. Durch Klicken auf die Schaltfläche wird nicht zur angegebenen URL gesprungen.
Heutzutage wird aufgrund der Projektanforderungen ...
Neue Features in MySQL 8: Unsichtbare Indizes
Hintergrund Indizes sind ein zweischneidiges Schw...
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
HTML-Bild img-Tag_Powernode Java Academy
Zusammenfassung Projektbeschreibungsformat < i...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20 unter Windows 10
Auf dem Win10-System ist MySQL8.0.20 lokal instal...
Aktivieren Sie den SSHD-Vorgang im Docker
Installieren Sie zunächst den OpenSSH-Server im D...
Verwendung von Umgebungsvariablen in Docker und Lösungen für häufige Probleme
Vorwort Docker kann Umgebungsvariablen für Contai...
Das Problem, dass jquery.form.js den Zugriff im IE verweigert und der Input-Upload-Button aktiv angeklickt werden muss
Schauen wir uns zunächst den Code an <form id=...
Verwendung des Linux-Befehls xargs
1. Funktion: xargs kann die durch Leerzeichen ode...
Zusammenfassung der MySQL-Abfragesyntax
Vorwort: In diesem Artikel wird hauptsächlich die...
Detailliertes Beispiel für die Verwendung der Case-Anweisung in einer gespeicherten MySQL-Prozedur
Dieser Artikel veranschaulicht anhand eines Beisp...
MySQL-Leistungsoptimierungs-Index-Pushdown
Index Condition Pushdown (ICP) wird in MySQL 5.6 ...
Einige Tipps zur umfassenden Optimierung, um die Zugriffsgeschwindigkeit von Websites zu verbessern
<br />Die Zugriffsgeschwindigkeit einer Webs...
So ändern Sie den Hostnamen in Linux
1. Den aktuellen Hostnamen anzeigen [root@fangjia...