Maison  >  Article  >  interface Web  >  Comment utiliser Vue pour implémenter un menu flottant/caché dans le coin supérieur droit de la page

Comment utiliser Vue pour implémenter un menu flottant/caché dans le coin supérieur droit de la page

php中世界最好的语言
php中世界最好的语言original
2018-06-01 11:22:052706parcourir

Cette fois, je vais vous montrer comment utiliser Vue pour implémenter un menu flottant/caché dans le coin supérieur droit de la page. Quelles sont les précautions à prendre pour utiliser Vue pour implémenter un menu flottant/caché dans le coin supérieur droit de la page. page ? Voici un cas pratique, jetons un coup d'oeil.

Il s'agit d'une fonctionnalité très courante sur la plupart des sites Web. Cliquez sur l'avatar dans le coin supérieur droit de la page pour afficher un menu flottant. Cliquez ailleurs sur la page ou cliquez à nouveau sur l'avatar pour masquer le menu.

En tant que lion de siège frontal jQuery, on peut dire qu'il est très simple d'implémenter cette fonction, mais pour un novice qui vient de jeter un coup d'œil au document vue , il y a encore des pièges. Ce n'est complet que si vous marchez dessus vous-même.

Points de connaissances

  • Communication entre composants et composants

  • Calcul Propriétés

Texte

1. >Cela concerne uniquement la fonction du menu système pour le moment, le routage n'est donc pas encore impliqué.

L'idée de base est de transmettre la valeur booléenne showCancel au composant enfant via des accessoires et de lier les événements aux composants parent et enfant respectivement pour contrôler l'état d'affichage du menu système. Dans l'événement de clic lié du composant parent, la valeur showCancel transmise au composant enfant est réinitialisée.

Voici le premier petit point de connaissance - appel du sous-composant :

Écrivez d'abord l'élément personnalisé en attente d'être rendu par le sous-composant :

Ensuite importer Le sous-composant écrit :

<t-header :showCancel=showCancel></t-header>

Enregistrez ensuite le sous-composant dans le composant :

import THeader from "./components/t-header/t-header";

À ce stade, les nouveaux étudiants peuvent ne pas savoir comment utiliser ces sous-composants. correspondent à la balise La documentation officielle dit ceci :

components: {
 THeader
}
Lors de l'enregistrement d'un composant (ou d'un accessoire), vous pouvez utiliser kebab-case (nom séparé par un tiret), camelCase ( camel case. nom) ou PascalCase (nom avec la première lettre d'un mot en majuscule);

Dans les modèles HTML, veuillez utiliser kebab-case;

Je comprends (par exemple), lorsque l'élément personnalisé est Lorsque , le nom du composant enregistré peut être écrit de trois manières : t-header, tHeader et THeader. Dans ce cas, le composant enregistré sera automatiquement reconnu et rendu dans .

Il convient de noter que ce qui précède est un modèle HTML, qui est spécifié avec