Bagaimana untuk menunjukkan hanya satu menu V pada satu masa apabila mengklik untuk menunjukkan menu?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-08-29 10:05:02

ke hadapan

1425 orang telah melayarinya

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!