Comment implémenter la fonction cliquer pour zoomer et dézoomer des images via Vue ?

Comment implémenter la fonction cliquer pour zoomer et dézoomer des images via Vue ?

Dans le développement Web moderne, cliquer pour zoomer et dézoomer sur les images est une exigence courante. En tant que framework frontal populaire, Vue fournit des fonctions riches et une syntaxe concise, qui peuvent facilement implémenter cette fonction. Cet article présentera comment implémenter la fonction de zoom avant et arrière des images via Vue et fournira des exemples de code.

Tout d’abord, nous avons besoin d’un composant contenant plusieurs images. Vous pouvez utiliser la directive v-for de Vue pour afficher dynamiquement une liste d'images. Ce qui suit est un exemple de composant simple :

<template>
  <div>
    <img v-for="(image, index) in images" :key="index" :src="image.src" 
         @click="toggleModal(index)" class="thumbnail">
    <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>

Dans le code ci-dessus, nous utilisons un composant simple pour implémenter la fonction de zoom avant et arrière de l'image. Le composant contient une liste d'images et un composant de boîte modale. Chaque image est liée à l'événement click @click="toggleModal(index)", et la méthode toggleModal est déclenchée lorsque l'on clique sur l'image. La méthode

toggleModal transmettra le src de l'image actuellement cliquée à modalImage et définira modalShow sur true pour afficher la boîte modale. Le code du composant modal box Modal est le suivant :

<template>
  <div v-if="show" class="modal">
    <span @click="close" class="close">X</span>
    <img  :src="image" class="modal-image" alt="Comment implémenter la fonction cliquer pour zoomer et dézoomer des images via 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>

Dans le composant Modal, nous utilisons l'attribut props pour recevoir le show et l'image passés. La boîte modale contient un bouton de fermeture et une balise img pour afficher l'image. Lorsque vous cliquez sur le bouton de fermeture, la méthode close est déclenchée et l'événement close est transmis au composant parent via this.$emit('close').

Dans le code ci-dessus, nous avons également ajouté un style au composant Modal pour définir le style de la boîte modale.

Enfin, dans le composant parent, nous devons ajouter quelques styles lors de l'importation du composant Modal :

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

Dans le style ci-dessus, nous définissons la largeur et la hauteur de la vignette, et plaçons le curseur de la souris sur le pointeur, indiquant que on peut cliquer dessus.

Grâce au code ci-dessus, nous pouvons facilement réaliser la fonction cliquer pour zoomer et dézoomer de l'image. Placez simplement l'image dans le tableau images du composant. Lorsque l'on clique sur l'image, la méthode toggleModal sera déclenchée, la boîte modale correspondante sera affichée et l'image cliquée sera affichée dans la boîte modale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!