Wie implementiert man ein WeChat-ähnliches unteres Menü in Vue?

In modernen Webanwendungen wird das untere Menü häufig als Haupteintrag für Navigation und Bedienung verwendet. WeChat ist eine beliebte mobile Anwendung und das Design des unteren Menüs hat große Aufmerksamkeit und Beliebtheit erregt.

Vue ist ein JavaScript-Framework für die moderne Webanwendungsentwicklung. Es bietet eine einfache und intuitive Möglichkeit, hochwertige Anwendungen mit wiederverwendbaren Komponenten zu erstellen. In diesem Artikel stellen wir vor, wie Sie mit Vue ein WeChat-ähnliches unteres Menü implementieren.

Schritt 1: Erstellen Sie ein Vue-Projekt

Bevor wir beginnen, müssen wir zunächst ein Vue-Projekt erstellen. Geben Sie den folgenden Befehl in die Befehlszeile ein:

vue create wechat-menu

und befolgen Sie dann die Anweisungen zur Konfiguration. Wählen Sie unter diesen die Option „Funktionen manuell auswählen“, wählen Sie „Babel“ und „Router“ und überspringen Sie alle anderen Optionen. Dadurch wird für uns ein Projekt mit Babel-Unterstützung und Vue-Router erstellt.

Schritt zwei: Router einrichten

Mit dem Vue Router können wir Single Page Applications (SPA) erstellen, bei denen das gesamte Laden und Rendern von Seiten auf derselben Seite erfolgt. In unserem Projekt müssen wir einen Router verwenden, um verschiedene Ansichten des unteren Menüs zu definieren und zu verwalten.

Öffnen Sie zunächst die Datei /src/router/index.js, löschen Sie den Standard-Router-Code und ersetzen Sie ihn durch den folgenden Code:

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

Im obigen Code importieren wir zuerst Vue und VueRouter und verwenden die Vue.use( ) Methode, um ihnen einen Router vorzustellen. Anschließend werden drei Routen definiert, nämlich Home, Profile und Settings, und für diese jeweils ein Pfad und eine entsprechende Komponente angegeben. Der /-Pfad ist auf den Home-Pfad festgelegt, der /profile-Pfad ist der Profilpfad und der /settings-Pfad ist der Einstellungspfad.

Als nächstes wird in den Router-Konfigurationsoptionen die Modusoption mit dem Wert „history“ verwendet, die den HTML5-Modus aktiviert, der es uns ermöglicht, das Routing-Status-Management-Tool zu verwenden, ohne die „#“-URL zu hashen. In der Basisoption konfigurieren wir den Basis-URL-Pfad für den Router.

Abschließend instanziieren wir den VueRouter und exportieren ihn. Dadurch können wir die API in anderen Komponenten der Anwendung verwenden.

Schritt 3: Erstellen Sie eine untere Menükomponente.

Als nächstes erstellen wir eine untere Menükomponente, die drei Schaltflächen enthält, die den drei von uns definierten Routen entsprechen.

Zuerst müssen wir eine neue Vue-Komponente erstellen. Erstellen Sie im Verzeichnis /src/components/ eine Datei mit dem Namen BottomMenu.vue. Hier ist der ursprüngliche Inhalt der Datei:

<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>

Im obigen Code definieren wir zunächst ein div-Element, das drei Router-Link-Elemente enthält, die die Routennavigation ermöglichen. Jeder Router-Link verfügt über ein to-Attribut, das auf die Komponente verweist, die dem von uns definierten Routing-Pfad entspricht.

Dann legen wir Stile für die Klassen „bottom-menu“ und „bottom-menu-item“ fest, um das Erscheinungsbild des unteren Menüs zu verschönern. Unter anderem verwendet .bottom-menu das Flex-Layout, um die Hintergrundfarbe, die Füllung und den Boxschatten des unteren Menüs festzulegen. Die Bottom-Menu-Item-Klasse definiert die Stileigenschaften ihrer untergeordneten Elemente.

Schritt 4: Fügen Sie die untere Menükomponente zur Stammkomponente hinzu

Nachdem wir nun die untere Leistenkomponente geschrieben und den Router eingerichtet haben, müssen wir nun die untere Leistenkomponente zu unserer Anwendung hinzufügen.

Öffnen Sie zunächst die Datei /src/views/Home.vue. Fügen Sie darin den folgenden Code hinzu:

<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>

Im obigen Code haben wir zuerst die BottomMenu-Komponente importiert und sie der Komponenteneigenschaft der aktuellen Komponente hinzugefügt. Dann verwenden wir die BottomMenu-Komponente in der Vorlage und platzieren sie unten auf der Seite.

Als nächstes wiederholen Sie die obigen Schritte und fügen die BottomMenu-Komponente in /src/views/Profile.vue und /src/views/Settings.vue hinzu. Dann haben wir eine Vue-Anwendung fertiggestellt, die das untere Menü von WeChat imitiert!

Dies ist der vollständige Schritt zur Verwendung von Vue zur Implementierung eines WeChat-ähnlichen unteren Menüs. Unterwegs haben wir Vue Router verwendet, um die Navigation der verschiedenen Ansichten im unteren Menü zu verwalten und eine neue Vue-Komponente zum Rendern des Menüs selbst zu erstellen. Schließlich fügen wir jeder Ansicht in der Anwendung die untere Menükomponente hinzu, um sicherzustellen, dass sie auf jeder Seite sichtbar ist.

Das obige ist der detaillierte Inhalt vonWie implementiert man ein WeChat-ähnliches unteres Menü in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!