Comment changer le style du menu dans Uniapp après avoir cliqué dessus

Aujourd'hui, nous allons partager comment implémenter la fonction de changement de style d'un menu après avoir cliqué dessus dans uniapp.

Dans de nombreuses applications, les menus font partie intégrante. Normalement, lorsqu'un utilisateur clique sur un élément de menu, cela doit refléter le fait que l'option est sélectionnée. Cela signifie que le style des options devrait changer. Dans Uniapp, c'est très simple à mettre en œuvre.

Tout d’abord, nous devons créer un composant de menu simple. Ici, nous allons créer un composant de menu de navigation de base. Vous pouvez le modifier en fonction des besoins de votre application.

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

Dans l'exemple ci-dessus, nous avons un attribut de données activeIndex qui est utilisé pour suivre quel élément de menu est sélectionné. Nous avons également une méthode handleClick qui met à jour activeIndex lorsque l'utilisateur clique sur un élément de menu. Enfin, dans la section styles, nous définissons une classe appelée .active qui contient les styles de l'élément de menu sélectionné.

Maintenant, si vous utilisez ce composant de menu dans votre application, vous verrez que lorsque vous cliquez sur l'élément de menu, son style change. Cependant, si vous utilisez ce composant dans une autre page, l'élément de menu précédemment sélectionné sera réinitialisé à sa valeur par défaut. Afin de résoudre ce problème, nous devons utiliser le bus d'événements fourni par uniapp.

Le bus d'événements est un système d'événements au niveau du framework qui permet à n'importe quel composant de l'application de s'abonner et de publier des événements. En utilisant le bus d'événements, nous pouvons partager des données et des états entre les composants.

Nous devons d'abord créer un bus d'événements dans main.js :

import Vue from 'vue';

export const EventBus = new Vue();

Comme mentionné ci-dessus, nous importons simplement vue et créons une instance EventBus. Nous pouvons désormais l'utiliser dans n'importe quel composant pour publier et nous abonner à des événements.

Revenons maintenant au composant menu et ajoutons le code suivant dans la méthode handleClick :

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

Ici, nous utilisons une instance EventBus pour publier un événement appelé "menu-item-clicked" et transmettre la sélection actuelle L'index du élément de menu.

Maintenant, dans n'importe quel autre composant de l'application, nous pouvons nous abonner à cet événement et mettre à jour l'élément de menu sélectionné. Ajoutons le code suivant au composant de page basé sur cette idée :

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

Ici, nous introduisons l'EventBus créé dans main.js et nous abonnons à l'événement "menu-item-clicked" dans le hook de vie créé du composant de page . Lorsque cet événement est déclenché, nous mettons à jour le titre et le contenu de la page avec l'index des éléments de menu transmis.

Désormais, lorsque vous cliquez sur une option dans le menu, vous verrez le titre et le contenu de votre page changer en conséquence.

Pour résumer, nous avons implémenté la fonction permettant de changer le style d'un menu après avoir cliqué dessus dans uniapp. Nous utilisons un composant de menu de navigation de base et un bus d'événements pour publier un événement appelé "élément de menu cliqué" lorsque l'utilisateur clique sur l'élément de menu. N'importe quel composant peut s'abonner à cet événement et mettre à jour son élément de menu sélectionné.

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!