Bagaimana untuk melaksanakan paparan pop timbul dan kotak modal gambar dalam Vue?

Bagaimana untuk melaksanakan paparan pop timbul dan kotak modal dalam Vue?

Dalam pembangunan web, selalunya perlu mengklik pada imej untuk muncul kotak modal untuk memaparkan imej besar imej. Vue, sebagai rangka kerja JavaScript yang popular, boleh melengkapkan fungsi ini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan paparan pop timbul dan kotak modal imej.

Pertama, kita memerlukan senarai gambar, yang boleh ditakrifkan melalui atribut data. Katakan kita mempunyai tatasusunan yang mengandungi URL imej, yang boleh dimulakan dalam atribut data Vue:

data() {
  return {
    imageList: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    showModal: false, // 控制模态框显示与隐藏的变量
    selectedImage: '' // 记录当前选中的图片URL
  }
}

Seterusnya, lintasi Senarai imej dalam templat, buat pengendali acara klik untuk setiap imej dan ikatkannya pada imej yang sepadan ：

<template>
  <div>
    <div v-for="image in imageList" :key="image">
      <img  :src="image" @click="showModal = true; selectedImage = image" alt="Bagaimana untuk melaksanakan paparan pop timbul dan kotak modal gambar dalam Vue?" >
    </div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showModal = false">&times;</span>
        <img  :src="selectedImage" alt="Bagaimana untuk melaksanakan paparan pop timbul dan kotak modal gambar dalam Vue?" >
      </div>
    </div>
  </div>
</template>

Dalam kod di atas, kami menggunakan arahan v-for untuk melintasi imageList dan menambah pengendali acara klik untuk setiap imej. Apabila pengguna mengklik pada gambar, kami menetapkan atribut showModal kepada benar dan memperuntukkan URL gambar yang sedang diklik kepada selectedImage. Ini akan memaparkan imej yang diklik oleh pengguna dalam kotak modal.

Perlu diingatkan bahawa kami juga menggunakan arahan v-if untuk mengawal paparan dan penyembunyian kotak modal. Apabila sifat showModal adalah benar, kotak modal dipaparkan apabila sifat showModal adalah palsu, kotak modal disembunyikan.

Pada masa yang sama, kami juga mengikat fungsi pengendali acara klik pada butang tutup dalam kotak modal untuk menutup kotak modal.

Akhir sekali, kita boleh mentakrifkan gaya kotak modal dalam CSS:

<style>
.modal {
  display: block; /* 显示模态框 */
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>

Dalam CSS di atas, kami menggunakan atribut kedudukan untuk membetulkan kotak modal di atas skrin. Pada masa yang sama, kami menetapkan warna latar belakang lut sinar supaya apabila kotak modal muncul, latar belakang menjadi gelap dan imej diserlahkan.

Setakat ini, kami telah melaksanakan fungsi paparan pop timbul dan kotak modal imej dalam Vue. Apabila pengguna mengklik pada imej, kotak modal yang mengandungi imej besar akan muncul. Pengguna boleh menutup modal dengan mengklik butang tutup.

Kesan ini boleh meningkatkan pengalaman menyemak imbas imej pengguna, dan juga menunjukkan fleksibiliti dan kemudahan Vue sebagai rangka kerja yang berkuasa.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paparan pop timbul dan kotak modal gambar dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!