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
Grundlegende Kenntnisse zum MySQL UNION-Operator
MySQL UNION-Operator Dieses Tutorial stellt die S...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...
Analyse allgemeiner Grundvorgänge der MySQL-Datenbank [Datenbank erstellen, anzeigen, ändern und löschen]
In diesem Artikel werden anhand von Beispielen di...
Erläuterung der grundlegenden Syntax gespeicherter Prozeduren in der MySQL-Datenbank
Löschprozedur sp_name/ Zuvor habe ich Ihnen die G...
Einführung in die Anwendung der HTML-Tags superscript sup und subscript sub
HTML-Tag: hochgestellt In HTML definiert das <s...
Implementieren eines binären Suchbaums in JavaScript
Die Implementierung des Suchbinärbaums in JavaScr...
Uniapp realisiert gleitenden Scoring-Effekt
In diesem Artikel wird der spezifische Code von U...
MySQL-Serie 15: Allgemeine MySQL-Konfiguration und Leistungsstresstest
1. Allgemeine MySQL-Konfiguration Alle folgenden ...
Linux verwendet die suid vim.basic-Datei, um eine Rechteausweitung zu erreichen
Auf Kali reproduzieren Legen Sie zunächst die Sui...
JavaScript-Canvas zum Erzielen von Regentropfeneffekten
In diesem Artikelbeispiel wird der spezifische Co...
Beispielmethode zum Anzeigen der mit MySQL verbundenen IP-Adresse
Spezifische Methode: Öffnen Sie zuerst die Eingab...
vue_drf implementiert SMS-Bestätigungscode
Inhaltsverzeichnis 1. Nachfrage 1. Nachfrage 2. S...
HTML implementiert die Funktion zur Erkennung der Eingabevervollständigung
Verwenden Sie „onInput(event)“, um festzustellen,...
Reflexion und Proxy in Front-End-JavaScript
Inhaltsverzeichnis 1. Was ist Reflexion? 2. Refle...
WeChat Mini-Programm implementiert den Likes-Dienst
In diesem Artikel wird der spezifische Code für d...