Comment créer une barre de navigation réactive dans Vue 3? Utilisez l'API de composition de Vue 3 pour construire la structure de base et implémenter la disposition réactive via CSS. 1. Créez un composant VUE qui comprend les boutons du logo, du lien et du commutateur mobile; 2. Utiliser les fonctions REF et ToggleMenu pour contr?ler l'état d'affichage des menus mobiles; 3. Utilisez la disposition CSS Flex pour réaliser la navigation horizontale de bureau; 4. Utiliser des requêtes multimédias et une animation max-hauteur pour réaliser des menus mobiles glissants; 5. Ajoutez un écouteur de taille de fenêtre pour fermer automatiquement le menu mobile.

La création d'une barre de navigation réactive dans Vue est une tache courante lors de la création d'applications Web modernes. L'objectif est de rendre la navigation accessible et visuellement cohérente sur différentes tailles d'écran - mobile, tablette et bureau. Vous trouverez ci-dessous un exemple pratique de la fa?on de mettre en ?uvre une barre de navigation réactive en utilisant Vue 3 (avec l'API de composition) et CSS de base.

Structure de base avec des composants Vue

Un Navbar réactif comprend généralement un logo, un ensemble de liens et un bouton à bascule pour les écrans mobiles. Voici une structure de composants Vue simple:

 <mpelate>
  <nav class = "navbar">
    <div class = "logo"> mylogo </div>
    <Button class = "toggle-btn" @ click = "toggleMenu">
      {{IsmobileMenuopen? &#39;?&#39;: &#39;?&#39;}}
    </ bouton>
    <ul class = "nav links": class = "{open: ismobilemenuopen}">
      <li> <a href = "#"> Accueil </a> </li>
      <li> <a href = "#"> à propos de </a> </li>
      <li> <a href = "#"> Services </a> </li>
      <li> <a href = "#"> Contact </a> </li>
    </ul>
  </ nav>
</ template>

<Configuration du script>
import {ref} de &#39;Vue&#39;

const IsmobileMenuopen = ref (false)
const togglemenu = () => {
  IsmobileMenuOpen.Value =! IsmobileMenuopen.Value
}
</cript>

Cela met en place une disposition de base avec un bouton à bascule qui appara?t sur des écrans plus petits. La fonction toggleMenu contr?le la visibilité du menu mobile.

Style réactif avec CSS

Maintenant, rendons cette mise en page réactive. Nous allons masquer le menu sur mobile et l'afficher lorsque la bascule est cliquée.

 .Navbar {
  Affichage: flex;
  justifier-contenu: espace-intermédiaire;
  Align-Items: Centre;
  rembourrage: 1rem 5%;
  Color d'arrière-plan: #FFF;
  Border-Bottom: 1px solide #ddd;
}

.logo {
  taille de police: 1.5rem;
  Police-poids: Bold;
}

.nav-links {
  Affichage: flex;
  écart: 1.5rem;
  Style de liste: aucun;
}

.nav-links a {
  Décoration du texte: aucune;
  Couleur: # 333;
}

.toggle-btn {
  Affichage: aucun;
  taille de police: 1.5rem;
  Contexte: aucun;
  Border: aucun;
  curseur: pointeur;
}

/ * Styles mobiles * /
@media (max-large: 768px) {
  .nav-links {
    Position: absolue;
    en haut: 100%;
    à gauche: 0;
    à droite: 0;
    Contexte: #FFFF;
    Flex-Direction: colonne;
    Align-Items: Centre;
    max-height: 0;
    débordement: caché;
    Transition: facilité de max-height 0.3S;
  }

  .nav-links.open {
    max-height: 300px;
  }

  .toggle-btn {
    Affichage: bloc;
  }
}

Ce CSS:

• Affiche les liens horizontalement sur le bureau
• Les cache sur mobile et affiche un bouton à bascule
• Glisse le menu en douceur en utilisant une animation max-height

Gestion des événements de redimension d'écran

Si vous souhaitez fermer automatiquement le menu mobile lorsque l'écran est redimensionné à la largeur du bureau, vous pouvez ajouter un observateur pour les modifications de la taille de la fenêtre:

 import {onmounted, onunmounted} à partir de 'vue'

const HandlereSize = () => {
  if (window.innerwidth> 768 && ismobilemenuopen.value) {
    IsmobileMenuOpen.Value = False
  }
}

onMounted (() => {
  window.addeventListener (?redimensi?, gestionnaire)
})

onunmounted (() => {
  window.RemoveEventListener (?redimensionner?, Handleresize)
})

Cela garantit que le menu mobile ne reste pas ouvert lorsque l'utilisateur redimensionne le navigateur à une largeur plus grande.

Notes finales

• Vous pouvez améliorer cela avec des animations, des transitions ou même utiliser une bibliothèque d'interface utilisateur comme Vuetify ou Bootstrap Vue pour les composants prédéfinis.
• Envisagez l'accessibilité en ajoutant des attributs aria au bouton basculé et aux liens NAV.
• Si vous utilisez le routeur Vue, remplacez <a href="#"></a> par <router-link></router-link> pour la navigation spa.

Fondamentalement, c'est tout. Avec seulement quelques lignes de VUE et CSS, vous avez une barre de navigation réactive entièrement fonctionnelle qui s'adapte à différentes tailles d'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!