So ändern Sie den Menüstil in Uniapp, nachdem Sie darauf geklickt haben

Heute zeigen wir Ihnen, wie Sie die Funktion zum Ändern des Stils eines Menüs implementieren, nachdem Sie in Uniapp darauf geklickt haben.

In vielen Anwendungen sind Menüs ein fester Bestandteil. Wenn ein Benutzer auf einen Menüpunkt klickt, sollte dies normalerweise die Tatsache widerspiegeln, dass die Option ausgewählt ist. Das bedeutet, dass sich der Stil der Optionen ändern sollte. In uniapp ist dies sehr einfach zu implementieren.

Zuerst müssen wir eine einfache Menükomponente erstellen. Hier erstellen wir eine grundlegende Navigationsmenükomponente. Sie können es entsprechend Ihren Anwendungsanforderungen ändern.

<template>
  <div class="menu">
    <ul>
      <li @click="handleClick(0)" :class="{active: activeIndex === 0}">首页</li>
      <li @click="handleClick(1)" :class="{active: activeIndex === 1}">新闻</li>
      <li @click="handleClick(2)" :class="{active: activeIndex === 2}">关于我们</li>
      <li @click="handleClick(3)" :class="{active: activeIndex === 3}">联系我们</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0
    };
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style scoped>
.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu ul li {
  display: inline-block;
  padding: 16px;
  cursor: pointer;
}
.menu ul li.active {
  background-color: #007bff;
  color: #fff;
}
</style>

Im obigen Beispiel haben wir ein Datenattribut activeIndex, das verwendet wird, um zu verfolgen, welcher Menüpunkt ausgewählt ist. Wir haben auch eine Methode handleClick, die activeIndex aktualisiert, wenn der Benutzer auf einen Menüpunkt klickt. Schließlich definieren wir im Abschnitt „Stile“ eine Klasse namens .active, die die Stile für den ausgewählten Menüpunkt enthält.

Wenn Sie nun diese Menükomponente in Ihrer Anwendung verwenden, werden Sie feststellen, dass sich der Stil ändert, wenn Sie auf den Menüpunkt klicken. Wenn Sie diese Komponente jedoch auf einer anderen Seite verwenden, wird der zuvor ausgewählte Menüpunkt auf seinen Standardwert zurückgesetzt. Um dieses Problem zu lösen, müssen wir den von uniapp bereitgestellten Ereignisbus verwenden.

Der Ereignisbus ist ein Ereignissystem auf Framework-Ebene, das es jeder Komponente in der Anwendung ermöglicht, Ereignisse zu abonnieren und zu veröffentlichen. Mithilfe des Ereignisbusses können wir Daten und Zustände zwischen Komponenten austauschen.

Wir müssen zuerst einen Event-Bus in main.js erstellen:

import Vue from 'vue';

export const EventBus = new Vue();

Wie oben erwähnt, importieren wir einfach Vue und erstellen eine EventBus-Instanz. Jetzt können wir es in jeder Komponente verwenden, um Ereignisse zu veröffentlichen und zu abonnieren.

Jetzt kehren wir zur Menükomponente zurück und fügen der handleClick-Methode den folgenden Code hinzu:

handleClick(index) {
  this.activeIndex = index;
  EventBus.$emit('menu-item-clicked', index);
}

Hier verwenden wir eine EventBus-Instanz, um ein Ereignis namens „menu-item-clicked“ zu veröffentlichen und die aktuelle Auswahl zu übergeben Menüpunkt.

Jetzt können wir in jeder anderen Komponente der Anwendung dieses Ereignis abonnieren und den ausgewählten Menüpunkt aktualisieren. Fügen wir der Seitenkomponente basierend auf dieser Idee den folgenden Code hinzu:

<template>
  <div>
    <menu></menu>
    <h2>{{ pageTitle }}</h2>
    <p>{{ pageContent }}</p>
  </div>
</template>

<script>
import { EventBus } from '@/main';

export default {
  data() {
    return {
      pageTitle: '首页',
      pageContent: '欢迎来到我们的网站！'
    };
  },
  created() {
    EventBus.$on('menu-item-clicked', index => {
      switch (index) {
        case 0:
          this.pageTitle = '首页';
          this.pageContent = '欢迎来到我们的网站！';
          break;
        case 1:
          this.pageTitle = '新闻';
          this.pageContent = '这里是我们的最新消息。';
          break;
        case 2:
          this.pageTitle = '关于我们';
          this.pageContent = '了解我们的历史和团队。';
          break;
        case 3:
          this.pageTitle = '联系我们';
          this.pageContent = '与我们联系。我们非常期待与您合作！';
          break;
        default:
          this.pageTitle = '首页';
          this.pageContent = '欢迎来到我们的网站！';
      }
    });
  }
};
</script>

<style scoped>
h2 {
  margin-top: 0;
}
</style>

Hier stellen wir den in main.js erstellten EventBus vor und abonnieren das Ereignis „menu-item-clicked“ im erstellten Life-Hook der Seitenkomponente . Wenn dieses Ereignis ausgelöst wird, aktualisieren wir den Seitentitel und den Inhalt mit dem übergebenen Menüelementindex.

Wenn Sie nun auf eine Option im Menü klicken, werden sich Ihr Seitentitel und Ihr Inhalt entsprechend ändern.

Zusammenfassend haben wir die Funktion implementiert, den Stil eines Menüs zu ändern, nachdem man in uniapp darauf geklickt hat. Wir verwenden eine grundlegende Navigationsmenükomponente und einen Ereignisbus, um ein Ereignis namens „menu-item-clicked“ zu veröffentlichen, wenn auf das Menüelement geklickt wird. Jede Komponente kann dieses Ereignis abonnieren und den ausgewählten Menüpunkt aktualisieren.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Menüstil in Uniapp, nachdem Sie darauf geklickt haben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!