Heim > Artikel > Web-Frontend > Wie kann ich jeweils nur ein V-Menü anzeigen, wenn ich auf klicke, um das Menü anzuzeigen?

Wie kann ich jeweils nur ein V-Menü anzeigen, wenn ich auf klicke, um das Menü anzuzeigen?

WBOYnach vorne: 2023-08-29 10:05:021360Durchsuche

Die Aufgabe, die wir in diesem Artikel ausführen werden, besteht darin, wie man durch Klicken auf „Menü anzeigen“ jeweils nur ein V-Menü gleichzeitig anzeigt. Lesen wir diesen Artikel ausführlich, um das V-Menü besser zu verstehen.

Eine angepasste Version von NativeUI wird verwendet, um serverseitige Trainer und Menüs namens vMenu zu erstellen. Es bietet vollständige Berechtigungsunterstützung, sodass Serverbesitzer steuern können, wer was tun darf.

Virtuelles Menü anzeigen

Das Menü der Benutzeroberfläche ist ein flexibles Element. Es werden Pop-ups angezeigt, die mehreren Zwecken dienen, beispielsweise der Präsentation eines Menüs mit Optionen. Sie können in Verbindung mit Schaltflächen, Symbolleisten oder App-Leisten verwendet werden.

Um mehr darüber zu erfahren, wie beim Klicken auf „Menü anzeigen“ jeweils nur ein virtuelles Menü angezeigt wird, schauen wir uns das folgende Beispiel an.

Beispiel

Betrachten Sie das folgende Beispiel: Wenn wir auf „Menü auf Webseite anzeigen“ klicken, wird jeweils nur ein virtuelles Menü angezeigt.

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

Wenn Sie das obige Skript ausführen, wird ein Ausgabefenster mit den Listenoptionen sowie den Klickschaltflächen auf der Webseite angezeigt. Wenn der Benutzer auf die Schaltfläche klickt, werden die drei Elemente der Liste auf der Webseite angezeigt.

Beispiel

Im folgenden Beispiel führen wir ein Skript aus, um ein virtuelles Menü anzuzeigen, wenn auf eine auf einer Webseite angezeigte Schaltfläche geklickt wird.

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

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die aus angeklickten Schaltflächen auf der Webseite besteht. Wenn der Benutzer auf die Schaltfläche klickt, wird das virtuelle Menü für die erste Taste angezeigt. Wenn der Benutzer erneut auf die Schaltfläche klickt, wird das virtuelle Menü für die zweite Taste angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich jeweils nur ein V-Menü anzeigen, wenn ich auf klicke, um das Menü anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich in JavaScript ein Array mit Teilobjekten aus einem anderen Array?Nächster Artikel：Wie erstelle ich in JavaScript ein Array mit Teilobjekten aus einem anderen Array?

In Verbindung stehende Artikel

Mehr sehen