vue实现画廊 前端代码

好的，以下是一个简单的 Vue 画廊组件的前端代码示例：

<template>
  <div class="gallery">
    <div class="image-container">
      <img
        v-for="(image, index) in images"
        :key="index"
        :src="image.src"
        :alt="image.alt"
        @click="showImage(index)"
      />
    </div>
    <modal v-if="showModal" :image="selectedImage" @close="closeModal" />
  </div>
</template>

<script>
import Modal from "./Modal.vue";

export default {
  name: "Gallery",
  components: {
    Modal,
  },
  data() {
    return {
      images: [
        {
          src: "https://via.placeholder.com/400x400?text=Image+1",
          alt: "Image 1",
        },
        {
          src: "https://via.placeholder.com/400x400?text=Image+2",
          alt: "Image 2",
        },
        {
          src: "https://via.placeholder.com/400x400?text=Image+3",
          alt: "Image 3",
        },
      ],
      showModal: false,
      selectedImage: null,
    };
  },
  methods: {
    showImage(index) {
      this.selectedImage = this.images[index];
      this.showModal = true;
    },
    closeModal() {
      this.selectedImage = null;
      this.showModal = false;
    },
  },
};
</script>

<style>
.gallery {
  display: flex;
  flex-wrap: wrap;
}

.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}
</style>

这个组件包含了一个 `Gallery` 和一个 `Modal` 组件。`Gallery` 组件用于显示所有的图片，而 `Modal` 组件用于显示单独的一张图片。当用户点击图片时，`showImage` 方法会被调用，该方法会将被选中的图片存储在 `selectedImage` 变量中，并将 `showModal` 变量设置为 `true`。这会导致 `Modal` 组件被渲染出来，并且会显示被选中的图片。

当用户点击 `Modal` 组件中的关闭按钮时，`closeModal` 方法会被调用，该方法会将 `selectedImage` 变量设置为 `null`，并将 `showModal` 变量设置为 `false`。这会导致 `Modal` 组件被销毁，因为它的 `v-if` 指令会被移除。