Rumah > Artikel > hujung hadapan web > Bagaimana untuk menunjukkan hanya satu menu V pada satu masa apabila mengklik untuk menunjukkan menu?

Bagaimana untuk menunjukkan hanya satu menu V pada satu masa apabila mengklik untuk menunjukkan menu?

WBOYke hadapan: 2023-08-29 10:05:021399semak imbas

Tugas yang akan kami laksanakan dalam artikel ini ialah bagaimana untuk memaparkan hanya satu menu v pada satu masa pada klik menu rancangan, mari baca artikel ini secara mendalam untuk memahami menu v dengan lebih baik.

Versi NativeUI tersuai digunakan untuk mencipta jurulatih dan menu bahagian pelayan yang dipanggil vMenu. Ia mempunyai sokongan kebenaran penuh, membenarkan pemilik pelayan mengawal siapa yang boleh melakukan apa.

Tunjukkan menu maya

Menu antara muka pengguna ialah elemen yang fleksibel. Ia memaparkan pop timbul yang menyediakan pelbagai tujuan, seperti membentangkan menu pilihan. Ia boleh digunakan bersama dengan butang, bar alat atau bar aplikasi.

Untuk mengetahui lebih lanjut tentang menunjukkan hanya satu menu maya pada satu masa apabila mengklik Papar Menu, mari lihat contoh berikut.

Contoh

Pertimbangkan contoh berikut, apabila kita mengklik pada menu tunjukkan pada halaman web, hanya satu menu maya dipaparkan pada satu masa.

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

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan pilihan senarai serta butang klik pada halaman web. Apabila pengguna mengklik butang, ia memaparkan tiga item senarai pada halaman web.

Contoh

Dalam contoh berikut, kami menjalankan skrip untuk memaparkan menu maya apabila butang yang dipaparkan pada halaman web diklik.

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

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada butang yang diklik pada halaman web. Apabila pengguna mengklik butang, menu maya untuk kekunci pertama dipaparkan, dan jika pengguna mengklik butang itu sekali lagi, menu maya untuk kekunci kedua dipaparkan.

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan hanya satu menu V pada satu masa apabila mengklik untuk menunjukkan menu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membuat tatasusunan yang mengandungi objek separa daripada tatasusunan lain dalam JavaScript?Artikel seterusnya：Bagaimana untuk membuat tatasusunan yang mengandungi objek separa daripada tatasusunan lain dalam JavaScript?

Artikel berkaitan

Lihat lagi