Web-Frontend
js-Tutorial
Vue implementiert ein schwebendes/verstecktes Systemmenü in der oberen rechten Ecke der Seite
Vue implementiert ein schwebendes/verstecktes Systemmenü in der oberen rechten Ecke der Seite
In diesem Artikel wird hauptsächlich die Implementierung eines Systemmenüs vorgestellt, das in der oberen rechten Ecke der Seite angehalten/ausgeblendet werden kann. Die Implementierungsidee besteht darin, den booleschen Wert von showCancel über Requisiten an die untergeordnete Komponente zu übergeben und Ereignisse daran zu binden Die übergeordneten und untergeordneten Komponenten steuern jeweils den Anzeigestatus des Systemmenüs. Freunde in Not können auf
verweisen. Dies ist eine sehr häufige Funktion auf den meisten Websites. Klicken Sie auf den Avatar in der oberen rechten Ecke der Seite, um ein schwebendes Menü anzuzeigen, oder klicken Sie erneut auf den Avatar Verstecke das Menü.
Als jQuery-Front-End-Belagerungslöwe kann man sagen, dass es sehr einfach ist, diese Funktion zu implementieren, aber für einen Anfänger, der gerade einen Blick auf das Vue-Dokument geworfen hat , es gibt immer noch Fallstricke Es ist nur dann vollständig, wenn man selbst darauf tritt.
Wissenspunkte
Kommunikation zwischen Komponenten und Komponenten
Berechnung Eigenschaften
Text
1. Übergeordnete Komponente
Hierbei handelt es sich vorerst nur um die Systemmenüfunktion, Routing ist also noch nicht betroffen.
Die Grundidee besteht darin, den booleschen Wert showCancel über Requisiten an die untergeordnete Komponente zu übergeben und Ereignisse an die übergeordnete bzw. untergeordnete Komponente zu binden, um den Anzeigestatus des Systemmenüs zu steuern. Im gebundenen Klickereignis der übergeordneten Komponente wird der an die untergeordnete Komponente übergebene showCancel-Wert zurückgesetzt.
Dies beinhaltet den ersten kleinen Wissenspunkt – Unterkomponentenaufruf:
Schreiben Sie zuerst das benutzerdefinierte Element, das darauf wartet, von der Unterkomponente gerendert zu werden:
<t-header :showCancel=showCancel></t-header>
Dann importieren Sie die geschriebene Unterkomponente:
import THeader from "./components/t-header/t-header";
Dann registrieren Sie die Unterkomponente in der Komponente:
components: {
THeader
}Zu diesem Zeitpunkt sind neue Schüler möglicherweise verwirrt darüber, wie diese Codezeilen Unterkomponenten dem
Beim Registrieren einer Komponente (oder Requisite) können Sie kebab-case (durch Bindestriche getrennte Benennung), camelCase (Kamel-Benennung) oder PascalCase (benannt mit dem ersten Buchstaben des Wortes in Großbuchstaben) verwenden;
Bitte verwenden Sie in der HTML-Vorlage „kebab-case“;
Nach meinem Verständnis kann der registrierte Komponentenname beispielsweise auf drei Arten geschrieben werden, wenn das benutzerdefinierte Element
Es ist zu beachten, dass es sich bei dem oben genannten um eine HTML-Vorlage handelt, die mit angegeben wird. Es gibt auch eine Zeichenfolgenvorlage, die in verwendet wird Die mit template: „“ in den Komponentenoptionen angegebene Vorlage. Bei Verwendung von Zeichenfolgenvorlagen können benutzerdefinierte Tags auf drei Arten geschrieben werden. Einzelheiten zu den Namenskonventionen für Komponenten finden Sie in der offiziellen Dokumentation.
Auf diese Weise entstand der Prototyp der übergeordneten Komponente:
<t-header :showCancel=showCancel></t-header>
<script> import THeader from "./components/t-header/t-header"; export default { name: "app", components: { THeader }, data() { return { showCancel: false }; }, methods: { hideCancel() { this.showCancel = false; } } }; </script>
2. Untergeordnete Komponente In der Unterkomponente
ist .cancel die Schaltfläche zum Öffnen des Systemmenüs und .cancel-p ist das Systemmenü. Es sieht zunächst so aus:
<template> <p class="header-wrapper"> /*这里是logo和title*/ ... /*这里是用户名和按钮*/ <p class="info-wrapper"> <span class="username">你好，管理员！</span> <span class="cancel" @click.stop="switchCancelBoard"> <p class="cancel-p" v-show="showCancel"> <ul> <li @click.stop="doSomething" title="用户设置">设置 </li> <li @click.stop="doSomething" title="退出登录">退出 </li> </ul> </p> </span> </p> </p> </template>
Benutzen Sie gemäß der Idee v-show, um die Anzeige und das Ausblenden zu steuern, nachdem die untergeordnete Komponente den showCancel-Wert erhalten hat. Dann im gebundenen Klickereignis des übergeordneten und untergeordneten Elements Komponenten müssen Sie nur den Wert von showCancel entsprechend der Situation ändern. Die Bindungsereignisse mehrerer Optionen sollten nicht die Bindungsereignisse für die übergeordneten und untergeordneten Komponenten auslösen. Sie können nicht einfach auf das Menü klicken und es wird verschwinden, also wird .stop im Bindungsereignis verwendet, das heißt @click.stop="doSomething"
Also war alles in Ordnung, was so aussieht:
<script>
export default {
props: {
showCancel: {
type: Boolean
}
},
methods: {
doSomething() {},
switchCancelBoard() {
this.showCancel = !this.showCancel;
}
},
computed: {
ifShowCancel() {
return this.showCancel;
}
}
};
</script>Nach der ersten Welle von Fallstricken wurde jedoch klar, dass ich noch zu jung war. Hier sind einige schlechte Beispiele: Der showCancel-Wert von
prop kann tatsächlich verwendet werden. Wenn Sie auf die Unterkomponentenschaltfläche klicken, erkennt
this.showCancel=!this.showCancel
die Anzeige der Menü. /Ausblenden, aber sobald die Konsole geöffnet ist, führt jeder Klick zu einem Fehler:
Darüber hinaus wird der Anzeigestatus nicht überschrieben Der Grund dafür ist, dass die Änderung des Requisitenwerts der Unterkomponente keine Auswirkungen auf die übergeordnete Komponente hat, sodass der Wert von showCancel gegenüber dem Anfangswert unverändert bleibt und nur dann angezeigt wird, wenn dieser Wert aktualisiert wird Aktualisierung des relevanten Werts in der untergeordneten Komponente ausgelöst werden. ——Okay, dann verwenden Sie ehrlich gesagt eine berechnete Eigenschaft, um den showCancel-Wert zu erhalten, um den Statuswechsel des Systemmenüs durch Klicken auf die Unterkomponente zu realisierenvue.esm.js?efeb:578 [Vue-Warnung]: Vermeiden Sie es, eine Requisite direkt zu mutieren, da der Wert dies tut wird immer dann überschrieben, wenn die übergeordnete Komponente neu gerendert wird. Stattdessen wird eine auf dem Wert der Requisite basierende Eigenschaft überschrieben.
获得了计算属性ifShowCancel，组件相应的变成了v-show="ifShowCancel"，我试图在绑定事件里通过this.ifShowCancel=!this.ifShowCancel切换菜单状态，报错，得到报错信息：Computed property "ifShowCancel" was assigned to but it has no setter；
明白了，要以直接赋值的形式改变计算属性ifShowCancel的值，需要一个setter函数，但是setter函数中无法修改prop值，因此在getter中也就无法通过return this.showCancel来更新这个计算属性，所以这个方法貌似也行不通；
到此为止，好像路都成了堵死状态：prop值不能改->要用计算属性；计算属性不能改->需要setter；而写入了getter、setter，计算属性的值依赖于prop值->prop值不能改。——一个堪称完美的闭环诞生了！
走投无路之际我想起了$emit和$on这一对。
3. 父子互相通信
前边的prop实现了从父到子的单向通信，而通过$emit和$on，就可以实现从子组件到父组件的通信：这不能直接修改父组件的属性，但却可以触发父组件的指定绑定事件，并将一个值传入父组件。
在这一步我摒弃了点击按钮时的去操作子组件内属性的想法，既然计算属性ifShowCancel依赖于prop值，那么就在点击按钮时，通过$emit触发父组件的事件，并将需要修改的属性值传入父组件，于是：
/*父组件自定义元素绑定switch-show事件*/
<t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
// 父组件js
methods: {
//会被子组件$emit触发的方法
switchShow(val) {
this.showCancel = val;
}
}
// 子组件js
methods: {
//按钮上的绑定click事件
switchCancelBoard() {
this.$emit("switch-show", this.ifShowCancel);
}
}这样处理流程就变成了：点击按钮->作为计算属性的ifShowCancel值传入父组件并触发父组件事件，对showCancel赋值->父组件属性更新->触发子组件prop更新->触发重新compute，更新ifShowCancel值->v-show起作用。
另外在点击其他区域时，通过父组件绑定的click事件，就可以重置showCancel值，进而隐藏掉出现的系统菜单。
下边放出这个功能的完整代码。
4. 完整代码
/*父组件*/<script> import THeader from "./components/t-header/t-header"; export default { name: "app", components: { THeader }, data() { return { showCancel: false }; }, methods: { hideCancel() { this.showCancel = false; }, switchShow(val) { this.showCancel = val; } } }; </script> /*子组件*/
Title
你好，管理员！
<script> export default { props: { showCancel: { type: Boolean } }, methods: { doSomething() {}, switchCancelBoard() { // this.ifShowCancel = !this.showCancel; this.$emit("switch-show", !this.ifShowCancel); } }, computed: { ifShowCancel() { return this.showCancel; } } }; </script>
- 设置
- 退出
相关推荐：
Das obige ist der detaillierte Inhalt vonVue implementiert ein schwebendes/verstecktes Systemmenü in der oberen rechten Ecke der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Versteckte Einstellungen für das schwebende Fenster der Win11-Eingabemethode
Dec 30, 2023 pm 11:24 PM
Einige Freunde sind nicht an die Floating-Window-Funktion der Win11-Eingabemethode gewöhnt und es fühlt sich immer seltsam an, diese Floating-Window-Funktion zu deaktivieren. Jetzt werde ich Ihnen die korrekte Bedienungsmethode zum Schließen des Floating-Fensters vorstellen Win11-System. Folgen Sie uns. Win11 verbirgt das schwebende Fenster für die Eingabemethode. 1. Öffnen Sie die Einstellungstaste des Computers und wählen Sie dann „Zeit und Sprache“. Klicken Sie nach der Eingabe auf „Enter“. 2. Suchen Sie unter „Erweiterte Tastatureinstellungen“ nach „Eingabemethode wechseln“ und dann „Desktop-Sprache“ ändern Klicken Sie auf das Häkchen vor „Leiste“ und geben Sie dann „Sprachleistenoptionen“ ein. 3. Nach dem Öffnen klicken wir hier auf „Ausblenden“, um das schwebende Sprachfenster zu schließen.
Wie verstecke ich die Taskleistensymbole von Windows 11?
Jan 06, 2024 am 08:38 AM
Wenn wir im Win11-System die Symbole in der Taskleiste als störend empfinden, können wir sie in der Taskleisten-Ecküberlaufoberfläche ausblenden. Die Symbole in der Taskleiste der unten geöffneten Anwendung können jedoch nicht ausgeblendet werden. Werfen wir einen Blick auf die konkrete Situation. So blenden Sie das Win11-Taskleistensymbol aus: 1. Zentrieren Sie das Symbol. 1. Wenn wir das Symbol in der Taskleiste unten ausblenden möchten, können wir zunächst mit der rechten Maustaste klicken, um es auszuwählen, und auf „Von Taskleiste entfernen“ klicken. 2. Wenn wir jedoch öffnen Diese Anwendung und sind dabei, sie zu verwenden, und das ist unmöglich zu verbergen. 2. Symbol in der unteren rechten Ecke 1. Wenn Sie das Anwendungssymbol in der unteren rechten Ecke ausblenden möchten, öffnen Sie zunächst die Systemeinstellungen. 2. Klicken Sie dann in der linken Seitenleiste auf „Personalisierung“, wie im Bild gezeigt. 3. Klicken Sie dann auf , um die Taskleiste auf der rechten Seite aufzurufen
Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? So verbergen Sie WeChat-Freunde, ohne sie zu blockieren oder zu löschen
Mar 13, 2024 pm 07:19 PM
Wie kann man WeChat-Freunde verstecken, ohne sie zu blockieren oder zu löschen? Viele Benutzer möchten einige Freunde ausblenden, wissen aber nicht, wie das geht. Auf dieser Website wird den Benutzern sorgfältig erklärt, wie sie WeChat-Freunde ausblenden können, ohne sie zu blockieren oder zu löschen. Methoden zum Ausblenden von WeChat-Freunden ohne Blockieren oder Löschen Methode 1: 1. Öffnen Sie zunächst die WeChat-Software, suchen Sie das Adressbuch auf der WeChat-Seite und klicken Sie auf „Mein“. 2. Dann betreten wir die Einstellungsseite. 3. Suchen Sie die Option „Datenschutz“ und klicken Sie darauf. 4. Klicken Sie dann auf „Nicht sehen lassen“. 5. Gehen Sie zur Seite „Do Not Let Her View“ und klicken Sie auf „+“, um die Freunde zu markieren, die Sie ausblenden möchten.
So verbergen Sie Werke in Douyin-Kurzvideos. So verbergen Sie persönliche Videowerke
Mar 12, 2024 pm 12:49 PM
In der Douyin-Kurzvideo-App-Software stehen viele kurze Videoarbeiten zur Verfügung. Sie können sie nach Belieben ansehen und sie sind alle dauerhaft kostenlos verfügbar Bieten Sie jedem die zufriedenstellendste Art zuzusehen. Geben Sie Ihr Konto ein, um sich online anzumelden, und es werden verschiedene aufregende Kurzvideos gesendet, die genau auf dem basieren, was jeder jeden Tag sieht. Sie können auch den Live-Übertragungsraum betreten, um mit dem Moderator zu interagieren und zu chatten, damit Sie sich wohl fühlen mehr glücklich. Die von Einzelpersonen hochgeladenen Werke können auch ganz einfach mit einem Klick eingerichtet werden. Wischen Sie nach oben und unten, um die Echtzeit-Kommentare unzähliger Internetnutzer anzuzeigen Jetzt hat der Herausgeber detaillierte Online-Douyin-Kurzvideos veröffentlicht. Benutzer drängen auf Möglichkeiten, persönliche Videoarbeiten zu verbergen. Öffnen Sie zunächst das kurze Douyin-Video
Mar 18, 2024 pm 03:40 PM
Neben der erstaunlichen Hardware-Ausstattung und den hervorragenden Funktionen verbirgt das Xiaomi Mi 14 auch einen faszinierenden Ort – Smart Island. Hier können Benutzer personalisierte Anpassungen und ein unbegrenztes kreatives Mobiltelefonerlebnis genießen. Aber nicht jedem gefällt diese Funktion. Wie versteckt das Xiaomi Mi 14 Smart Island? Finden wir es gemeinsam heraus. Wie verstecke ich Smart Island auf dem Xiaomi Mi 14? 1. Öffnen Sie die Einstellungsanwendung des Xiaomi 14-Mobiltelefons. 2. Scrollen Sie, um die Option „Funktionen“ zu finden, und klicken Sie zur Eingabe. 3. Suchen Sie auf der Funktionsseite die Option „Smart Island ausblenden“ und aktivieren Sie sie. 4. Nachdem Sie bestätigt haben, dass das Ausblenden des Smart Island aktiviert ist, kehren Sie zum Desktop zurück und Sie werden sehen, dass das Smart Island ausgeblendet wurde.
Ausführliches Tutorial zum Verstecken von Werken auf Douyin
Mar 25, 2024 pm 03:11 PM
1. Klicken Sie zunächst auf [+], um zu schießen. 2. Klicken Sie dann auf das Häkchen in der unteren rechten Ecke, um den Abschluss der Aufnahme zu bestätigen. Klicken Sie auf] Weiter[, 3. Klicken Sie auf [Wer kann sehen]. Wählen Sie einfach [Privat] aus. Szenario 2: Die Arbeit wurde übernommen. 1. Klicken Sie auf [Ich] und wählen Sie [Arbeit]. 2. Klicken Sie rechts auf das [drei Punkte]-Logo. 3. Wischen Sie nach links, um [Berechtigungseinstellungen] zu finden. 4. Klicken Sie auf [Als privat festlegen].
So bereinigen Sie den versteckten Müll auf Ihrem Telefon gründlich (entfernen Sie den Müll vollständig aus dem Speicher Ihres Telefons)
Jun 01, 2024 am 09:29 AM
Mobiltelefone sind durch die kontinuierliche Weiterentwicklung der Technologie und die Beliebtheit von Smartphones zu einem unverzichtbaren Bestandteil unseres täglichen Lebens geworden. Diese Junk-Dateien nehmen wertvollen Speicherplatz in Anspruch, und im Laufe der Zeit sammelt sich eine große Menge versteckter Junk-Dateien auf dem Telefon an, was jedoch zu einer Verschlechterung der Leistung des Telefons führt. Zu wissen, wie man versteckten Müll auf seinem Telefon gründlich bereinigt, ist für jeden Mobiltelefonbenutzer zu einem unverzichtbaren Wissen geworden. 1. Unnötige Anwendungs-Caches finden und löschen. 2. Anwendungen löschen, die nicht mehr verwendet werden. 3. Foto- und Video-Cache bereinigen. 4. Temporäre Dateien und Download-Ordner vollständig bereinigen. 5. Kontakt- und SMS-Datensätze organisieren und bereinigen. 6. System-Cache bereinigen. 7. Deinstallieren Sie nutzlose Systemanwendungen. 8. Bereinigen Sie den Browser-Cache und -Verlauf. 9. Löschen Sie ungültige Musik- und Audiodateien. 10. Optimieren Sie das Dateisystem Ihres Mobiltelefons
Wo sind die versteckten Spiele auf Steam?
Feb 24, 2024 am 11:37 AM
Sie können einige Spiele, die Sie nicht sehen möchten, in Steam ausblenden. Wo sind die versteckten Spiele? Spieler können in der Ansicht auf das versteckte Spiel klicken, um den darin enthaltenen versteckten Spielinhalt zu finden. Diese Einführung zum Auffinden versteckter Spiele auf Steam erklärt Ihnen die spezifische Methode. Im Folgenden finden Sie eine detaillierte Einführung. „Steam-Nutzungsanleitung“ Wo sind die versteckten Spiele in Steam? Antwort: Klicken Sie auf das versteckte Spiel in der Ansicht. Spezifische Methoden: 1. Klicken Sie zunächst auf die Ansicht in der Software und dann auf das versteckte Spiel. 2. Nach dem Klicken sehen Sie links im Menü die versteckten Spiele. So verstecken Sie Spiele: 1. Klicken Sie zunächst auf Ihre Spielebibliothek. 2. Wählen Sie ein Spiel aus, klicken Sie mit der rechten Maustaste und wählen Sie Verwalten. 3. Wählen Sie, ob Sie dieses Spiel ausblenden möchten.
