Bagaimana untuk membuat bar navigasi responsif di Vue 3? Gunakan API Komposisi Vue 3 untuk membina struktur asas dan melaksanakan susun atur responsif melalui CSS. 1. Buat komponen VUE yang termasuk butang logo, pautan dan suis mudah alih; 2. Gunakan fungsi ref dan togglemenu untuk mengawal status paparan menu mudah alih; 3. Gunakan susun atur CSS Flex untuk merealisasikan navigasi mendatar desktop; 4. Gunakan pertanyaan media dan animasi ketinggian max untuk merealisasikan menu gelongsor mudah alih; 5. Tambah pendengar saiz tetingkap untuk menutup menu mudah alih secara automatik.

Mewujudkan bar navigasi responsif di Vue adalah tugas yang sama apabila membina aplikasi web moden. Matlamatnya adalah untuk menjadikan navigasi dapat diakses dan secara visual konsisten merentasi saiz skrin yang berbeza - mudah alih, tablet, dan desktop. Berikut adalah contoh praktikal bagaimana untuk melaksanakan NAVBAR responsif menggunakan VUE 3 (dengan API Komposisi) dan CSS asas.

Struktur asas dengan komponen vue

Navbar responsif biasanya termasuk logo, satu set pautan, dan butang togol untuk skrin mudah alih. Berikut adalah struktur komponen VUE yang mudah:

 <pemat>
  <nav class = "navbar">
    <div class = "logo"> mylogo </div>
    <Button Class = "Toggle-Btn" @Click = "Togglemenu">
      {{isMobileMenuOpen? &#39;?&#39;: &#39;?&#39;}}
    </butang>
    <ul class = "nav-links": class = "{Open: IsMobileMenuOpen}">
      <li> <a href = "#"> home </a> </li>
      <li> <a href = "#"> tentang </a> </li>
      <li> <a href = "#"> perkhidmatan </a> </li>
      <li> <a href = "#"> Hubungi </a> </li>
    </ul>
  </nav>
</template>

<persediaan skrip>
import {ref} dari &#39;vue&#39;

const isMobileMenuOpen = ref (palsu)
const togglemenu = () => {
  isMobileMenuOpen.Value =! IsMobileMenuOpen.Value
}
</script>

Ini menetapkan susun atur asas dengan butang togol yang muncul pada skrin yang lebih kecil. Fungsi toggleMenu mengawal penglihatan menu mudah alih.

Gaya responsif dengan CSS

Sekarang, mari buat susun atur ini responsif. Kami akan menyembunyikan menu di telefon bimbit dan menunjukkannya apabila togol diklik.

 .NAVBAR {
  Paparan: Flex;
  Justify-Content: Space-antara;
  Align-item: pusat;
  Padding: 1rem 5%;
  latar belakang warna: #fff;
  Sempadan-Bottom: 1px Solid #ddd;
}

.logo {
  saiz font: 1.5rem;
  Font-Weight: Bold;
}

.NAV-LINKS {
  Paparan: Flex;
  Gap: 1.5rem;
  Senarai gaya: Tiada;
}

.NAV-LINKS A {
  Teks-penyerapan: Tiada;
  Warna: #333;
}

.toggle-btn {
  Paparan: Tiada;
  saiz font: 1.5rem;
  Latar Belakang: Tiada;
  Sempadan: Tiada;
  kursor: penunjuk;
}

/ * Gaya mudah alih */
@media (max-width: 768px) {
  .NAV-LINKS {
    Kedudukan: Mutlak;
    Atas: 100%;
    Kiri: 0;
    Kanan: 0;
    Latar Belakang: #ffff;
    flex-arah: lajur;
    Align-item: pusat;
    Max-Height: 0;
    Limpahan: Tersembunyi;
    Peralihan: Max-tinggi 0.3s mudah;
  }

  .NAV-LINKS.OPEN {
    Max-Height: 300px;
  }

  .toggle-btn {
    paparan: blok;
  }
}

CSS ini:

• Memaparkan pautan secara mendatar di desktop
• Menyembunyikannya di telefon bimbit dan menunjukkan butang togol
• Slaid menu masuk/keluar dengan lancar menggunakan animasi max-height

Mengendalikan acara mengubah saiz skrin

Jika anda ingin secara automatik menutup menu mudah alih apabila skrin saiz semula ke lebar desktop, anda boleh menambah Watcher untuk perubahan saiz tetingkap:

 import {onmounted, onunmounted} dari 'vue'

const handleresize = () => {
  jika (window.innerWidth> 768 && ismobilemenuopen.value) {
    isMobileMenuOpen.Value = false
  }
}

onMounted (() => {
  window.addeventListener ('Resize', HandlerSize)
})

onunmounted (() => {
  Window.RemoveEventListener ('Resize', HandlerSize)
})

Ini memastikan menu mudah alih tidak dibuka apabila pengguna mengubah saiz penyemak imbas ke lebar yang lebih besar.

Nota akhir

• Anda boleh meningkatkan ini dengan animasi, peralihan, atau menggunakan perpustakaan UI seperti Vuetify atau Bootstrap Vue untuk komponen pra-dibina.
• Pertimbangkan kebolehaksesan dengan menambahkan atribut aria ke butang togol dan pautan NAV.
• Jika anda menggunakan Vue Router, gantikan <a href="#"></a> dengan <router-link></router-link> untuk navigasi spa.

Pada dasarnya itu sahaja. Dengan hanya beberapa baris VUE dan CSS, anda mempunyai bar navigasi responsif yang berfungsi sepenuhnya yang menyesuaikan diri dengan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Contoh vue bar navigasi responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!