Maison >interface Web >js tutoriel >Comment puis-je afficher un seul menu V à la fois lorsque je clique pour afficher le menu ?

Comment puis-je afficher un seul menu V à la fois lorsque je clique pour afficher le menu ?

WBOYavant: 2023-08-29 10:05:021437parcourir

La tâche que nous allons effectuer dans cet article est de savoir comment afficher un seul menu V à la fois en cliquant sur Afficher le menu, lisons cet article en profondeur pour mieux comprendre le menu V.

Une version personnalisée de NativeUI est utilisée pour créer des entraîneurs et des menus côté serveur appelés vMenu. Il prend en charge toutes les autorisations, permettant aux propriétaires de serveurs de contrôler qui peut faire quoi.

Afficher le menu virtuel

Le menu de l'interface utilisateur est un élément flexible. Il affiche des fenêtres contextuelles qui servent à plusieurs fins, telles que la présentation d'un menu d'options. Ils peuvent être utilisés conjointement avec des boutons, des barres d'outils ou des barres d'applications.

Pour en savoir plus sur l'affichage d'un seul menu virtuel à la fois lorsque vous cliquez sur Afficher le menu, jetons un œil à l'exemple suivant.

Exemple

Considérez l'exemple suivant, lorsque nous cliquons sur afficher le menu sur la page Web, un seul menu virtuel est affiché à la fois.

<!DOCTYPE html>
<html>
   <body>
      <script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
      <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
      <script src="https://unpkg.com/vuetify@2.6.9/dist/vuetify.min.js"></script>
      <div id="tutorial">
         <v-app>
            <div>
            <v-menu :open-on-hover="true" :open-on-click="true" v-for="(user, index) in userInfo" nudge-top="50px" :key="index" v-model="show[index]" top>
               <template v-slot:activator="{ on, attrs }">
                  <v-avatar v-on="on" size="24" color="blue">
                     <span>{{user.name}}</span>
                  </v-avatar>
               </template>
               <span>{{user.favoritecar}}
               <span>
            </v-menu>
            <v-btn @click="showTooltip">Button</v-btn>
         </v-app>
      </div>
      <script>
      new Vue({
         el: "#tutorial",
         vuetify: new Vuetify(),
         data() {
            return {
               userInfo: [{
                  id: 1,
                  name: "x",
                  favoritecar: "RX100"
               }, {
                  id: 2,
                  name: "y",
                  favoritecar: "DUCATI"
               }, {
                  id: 3,
                  name: "z",
                  favoritecar: "RANGEROVER"
               }],
               show: [false, false, false, false]
            };
         },
         methods: {
            showTooltip() {
               console.log("Open tooltip");
               Vue.set(this.show, 2, true);
            }
         }
      });
      </script>
   </body>
</html>

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra affichant les options de la liste ainsi que les boutons cliqués sur la page Web. Lorsque l'utilisateur clique sur le bouton, il affiche les trois éléments de la liste sur la page Web.

Exemple

Dans l'exemple suivant, nous exécutons un script pour afficher un menu virtuel lorsqu'on clique sur un bouton affiché sur une page Web.

<!DOCTYPE html>
<html>
   <body>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
      <div id="tutorial">
         <v-app>
            <div>
               <v-menu>
                  <template v-slot:activator="{ on }">
                     <v-btn v-on="on">Select</v-btn>
                  </template>
                  <transition-group tag="items" name="fade">
                     <v-list-item v-if="!t" @click="t=!t" key="1">
                        <v-list-item-title>MSD</v-list-item-title>
                     </v-list-item>
                     <v-list-item v-else @click="t=!t" key="2">
                        <v-list-item-title>VIRAT</v-list-item-title>
                     </v-list-item>
                  </transition-group>
               </v-menu>
            </div>
         </v-app>
      </div>
      <script>
         new Vue({
            el: '#tutorial',
            vuetify: new Vuetify(),
            data: () => ({
               t: true
            })
         })
      </script>
   </body>
</html>

Lorsque le script s'exécute, il génère une sortie composée des boutons cliqués sur la page Web. Lorsque l'utilisateur clique sur le bouton, le menu virtuel de la première touche s'affiche, et si l'utilisateur clique à nouveau sur le bouton, le menu virtuel de la deuxième touche s'affiche.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un tableau contenant des objets partiels d'un autre tableau en JavaScript ?Article suivant：Comment créer un tableau contenant des objets partiels d'un autre tableau en JavaScript ?

Articles Liés

Voir plus