Comment implémenter le menu inférieur de type WeChat dans Vue ?

Dans les applications Web modernes, le menu du bas est souvent utilisé comme entrée principale pour la navigation et les opérations. WeChat est une application mobile populaire et la conception de son menu inférieur a attiré une attention et un amour généralisés.

Vue est un framework JavaScript pour le développement d'applications Web modernes. Il fournit un moyen simple et intuitif de créer des applications de haute qualité avec des composants réutilisables. Dans cet article, nous présenterons comment utiliser Vue pour implémenter un menu inférieur de type WeChat.

Étape 1 : Créer un projet Vue

Avant de commencer, nous devons d'abord créer un projet Vue. Entrez la commande suivante dans la ligne de commande :

vue create wechat-menu

, puis suivez les invites pour configurer. Parmi eux, sélectionnez l'option « Sélectionner manuellement les fonctionnalités », sélectionnez « Babel » et « Routeur » et ignorez toutes les autres options. Cela créera un projet pour nous avec le support Babel et le routeur Vue.

Deuxième étape : configurer le routeur

Vue Router nous permet de créer des applications à page unique (SPA) dans lesquelles le chargement et le rendu de toutes les pages se déroulent sur la même page. Dans notre projet, nous devons utiliser un routeur pour définir et gérer différentes vues du menu du bas.

Tout d'abord, ouvrez le fichier /src/router/index.js, supprimez le code du routeur par défaut et remplacez-le par le code suivant :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
import Settings from '@/views/Settings.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  },
  {
    path: '/settings',
    name: 'Settings',
    component: Settings
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dans le code ci-dessus, nous importons d'abord Vue et VueRouter et utilisons Vue.use( ) méthode pour leur présenter le routeur. Ensuite, trois itinéraires sont définis, à savoir Accueil, Profil et Paramètres, et un chemin et un composant correspondant leur sont respectivement spécifiés. Le chemin / est défini sur le chemin Accueil, le chemin /profile est le chemin du profil et le chemin /settings est défini sur le chemin Paramètres.

Ensuite, dans les options de configuration du routeur, l'option mode est utilisée avec la valeur 'history', ce qui active le mode HTML5, ce qui nous permet d'utiliser l'outil de gestion de l'état de routage sans hacher l'URL '#'. Dans l'option de base, nous configurons le chemin URL de base du routeur.

Enfin, nous instancions le VueRouter et l'exportons. Cela nous permettra d'utiliser son API dans d'autres composants de l'application.

Étape 3 : Créer un composant de menu inférieur

Ensuite, nous allons créer un composant de menu inférieur, qui contient trois boutons, correspondant aux trois itinéraires que nous avons définis.

Tout d'abord, nous devons créer un nouveau composant Vue. Dans le répertoire /src/components/, créez un fichier nommé BottomMenu.vue. Voici le contenu initial du fichier :

<template>
  <div class="bottom-menu">
    <router-link to="/" class="bottom-menu-item">
      <i class="fas fa-home"></i>
    </router-link>
    <router-link to="/profile" class="bottom-menu-item">
      <i class="fas fa-user"></i>
    </router-link>
    <router-link to="/settings" class="bottom-menu-item">
      <i class="fas fa-cog"></i>
    </router-link>
  </div>
</template>

<script>
export default {}
</script>

<style>
.bottom-menu {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.1);
}

.bottom-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #777;
}

.bottom-menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}
</style>

Dans le code ci-dessus, nous définissons d'abord un élément div qui contient trois éléments router-link qui assureront la navigation routière. Chaque lien de routeur possède un attribut to, qui pointe vers le composant correspondant au chemin de routage que nous avons défini.

Ensuite, nous définissons des styles pour les classes du menu inférieur et des éléments du menu inférieur afin d'embellir l'apparence du menu inférieur. Parmi eux, .bottom-menu utilise la disposition flexible pour définir la couleur d'arrière-plan, le remplissage et l'ombre de la boîte du menu inférieur. La classe bottom-menu-item définit les propriétés de style de ses éléments enfants.

Étape 4 : Ajoutez le composant de menu inférieur au composant racine

Maintenant que nous avons écrit le composant de la barre inférieure et configuré le routeur, nous devons maintenant ajouter le composant de la barre inférieure à notre application.

Tout d’abord, ouvrez le fichier /src/views/Home.vue. Ajoutez-y le code suivant :

<template>
  <div class="home">
    <h1>Home</h1>
    <BottomMenu />
  </div>
</template>

<script>
import BottomMenu from '../components/BottomMenu.vue';

export default {
  name: 'Home',
  components: {
    BottomMenu
  }
};
</script>

<style>
.home {
  text-align: center;
}
</style>

Dans le code ci-dessus, nous avons d'abord importé le composant BottomMenu et l'avons ajouté à la propriété composants du composant actuel. Ensuite, nous utilisons le composant BottomMenu dans le modèle et le plaçons en bas de la page.

Ensuite, répétez les étapes ci-dessus et ajoutez le composant BottomMenu dans /src/views/Profile.vue et /src/views/Settings.vue. Ensuite, nous avons réalisé une application Vue qui imite le menu du bas de WeChat !

Il s'agit de l'étape complète sur la façon d'utiliser Vue pour implémenter un menu inférieur de type WeChat. En cours de route, nous avons utilisé Vue Router pour gérer la navigation des différentes vues dans le menu du bas, ainsi que pour créer un nouveau composant Vue pour restituer le menu lui-même. Enfin, nous ajoutons le composant de menu inférieur à chaque vue de l'application pour garantir qu'il est visible sur chaque page.

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!