Bagaimana untuk melaksanakan fungsi klik-untuk-zum masuk dan zum keluar imej melalui Vue?

Bagaimana untuk melaksanakan fungsi klik-untuk-zum-masuk dan zum-keluar imej melalui Vue?

Dalam pembangunan web moden, mengklik untuk mengezum masuk dan keluar imej adalah keperluan biasa. Sebagai rangka kerja bahagian hadapan yang popular, Vue menyediakan fungsi yang kaya dan sintaks ringkas, yang boleh melaksanakan fungsi ini dengan mudah. Artikel ini akan memperkenalkan cara melaksanakan fungsi klik untuk zum masuk dan zum keluar imej melalui Vue dan memberikan contoh kod.

Pertama, kita memerlukan komponen yang mengandungi berbilang imej. Anda boleh menggunakan arahan v-for Vue untuk memaparkan senarai imej secara dinamik. Berikut ialah contoh komponen mudah:

<template>
  <div>
    <img class="thumbnail lazy"  src="/static/imghw/default1.png"  data-src="image.src"  v-for="(image, index) in images" :key="index" : 
         @click="toggleModal(index)">
    <Modal :show="modalShow" :image="modalImage" @close="closeModal">
  </div>
</template>

<script>
import Vue from 'vue';
import Modal from './Modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      images: [
        {src: 'image1.jpg'},
        {src: 'image2.jpg'},
        {src: 'image3.jpg'}
      ],
      modalShow: false,
      modalImage: ''
    }
  },
  methods: {
    toggleModal(index) {
      this.modalImage = this.images[index].src;
      this.modalShow = true;
    },
    closeModal() {
      this.modalShow = false;
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan komponen mudah untuk melaksanakan fungsi zum masuk dan zum keluar imej. Komponen tersebut mengandungi senarai gambar dan komponen kotak modal. Setiap imej terikat pada peristiwa klik @click="toggleModal(index)", dan kaedah toggleModal dicetuskan apabila imej diklik. Kaedah

toggleModal akan menghantar src imej yang sedang diklik kepada modalImage dan menetapkan modalShow kepada benar untuk memaparkan kotak modal. Kod komponen kotak modal Modal adalah seperti berikut:

<template>
  <div v-if="show" class="modal">
    <span @click="close" class="close">X</span>
    <img  class="modal-image lazy"  src="/static/imghw/default1.png"  data-src="image"  : alt="Bagaimana untuk melaksanakan fungsi klik-untuk-zum masuk dan zum keluar imej melalui Vue?" >
  </div>
</template>

<script>
export default {
  props: ['show', 'image'],
  methods: {
    close() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-image {
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #ffffff;
  font-size: 24px;
}
</style>

Dalam komponen Modal, kami menggunakan atribut props untuk menerima persembahan dan imej yang diluluskan. Kotak modal mengandungi butang tutup dan tag img untuk memaparkan imej. Apabila butang tutup diklik, kaedah tutup dicetuskan dan acara tutup dihantar kepada komponen induk melalui ini.$emit('close').

Dalam kod di atas, kami turut menambah gaya pada komponen Modal untuk menetapkan gaya kotak modal.

Akhir sekali, dalam komponen induk, kita perlu menambah beberapa gaya semasa mengimport komponen Modal:

<style>
.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 10px;
  cursor: pointer;
}
</style>

Dalam gaya di atas, kami menetapkan lebar dan tinggi lakaran kecil, dan menetapkan kursor tetikus ke penunjuk, menunjukkan bahawa ia boleh diklik.

Melalui kod di atas, kita boleh merealisasikan fungsi klik-untuk-zum-masuk dan zum-keluar imej dengan mudah. Hanya masukkan imej ke dalam tatasusunan imej komponen. Apabila imej diklik, kaedah toggleModal akan dicetuskan, kotak modal yang sepadan akan dipaparkan dan imej yang diklik akan dipaparkan dalam kotak modal.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi klik-untuk-zum masuk dan zum keluar imej melalui Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!