使用 Vue 3 生成一个图片画廊，支持查看大图和切换图片

Vue 3 作为一个现代化的前端框架，通过其新的特性与 API 提供了更轻松的开发体验。在本篇博文中，我们将创建一个简单但功能强大的图片画廊，用户不仅可以查看缩略图，还可以点击查看大图，并在大图之间进行切换。我们将使用 Vue 3 的 setup 函数，使得我们的组件更加简洁和易于理解。

项目结构

首先，我们需要一个基本的项目结构。我们将创建一个名为 ImageGallery.vue 的组件，并在其中实现我们的逻辑。

目录结构

src/
├── components/
│   └── ImageGallery.vue
└── App.vue

示例代码

以下是 ImageGallery.vue 组件的完整代码：

<template>
  <div class="gallery">
    <h1>图片画廊</h1>
    
    <div class="thumbnails">
      <div
        class="thumbnail"
        v-for="(image, index) in images"
        :key="index"
        @click="openModal(index)"
      >
        <img :src="image.thumbnail" :alt="image.alt" />
      </div>
    </div>

    <Modal v-if="isModalOpen" @close="closeModal">
      <img :src="images[currentImageIndex].full" :alt="images[currentImageIndex].alt" />
      <button @click="prevImage">上一张</button>
      <button @click="nextImage">下一张</button>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Modal from './Modal.vue';

const images = [
  {
    thumbnail: 'thumb1.jpg',
    full: 'image1.jpg',
    alt: '图片1'
  },
  {
    thumbnail: 'thumb2.jpg',
    full: 'image2.jpg',
    alt: '图片2'
  },
  {
    thumbnail: 'thumb3.jpg',
    full: 'image3.jpg',
    alt: '图片3'
  }
  // 这里可以继续添加更多图片
];

const isModalOpen = ref(false);
const currentImageIndex = ref(0);

function openModal(index) {
  currentImageIndex.value = index;
  isModalOpen.value = true;
}

function closeModal() {
  isModalOpen.value = false;
}

function prevImage() {
  currentImageIndex.value =
    (currentImageIndex.value - 1 + images.length) % images.length;
}

function nextImage() {
  currentImageIndex.value = (currentImageIndex.value + 1) % images.length;
}
</script>

<style scoped>
.gallery {
  text-align: center;
}

.thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.thumbnail {
  margin: 10px;
  cursor: pointer;
}

.thumbnail img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

button {
  margin: 10px;
}
</style>

Modal 组件

为了实现大图查看的功能，我们需要一个 Modal 组件，用于展示大图。以下是 Modal.vue 的简单实现：

<template>
  <div class="modal-overlay" @click.self="close">
    <div class="modal-content">
      <slot></slot>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['close']);
</script>

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

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

代码讲解

数据源

images 数组存储了每个图片的缩略图与全图的 URL 地址，增加图片只需在该数组中添加新对象。

模态框管理

使用 isModalOpen 变量来管理模态框的显示与隐藏，使用 currentImageIndex 来跟踪当前查看的图片索引。

打开模态框

openModal 方法接收索引参数，更新当前图片索引并打开模态框。

关闭模态框

closeModal 方法用于关闭模态框。

切换图片

prevImage 和 nextImage 方法用于前后切换大图，利用模态框索引的循环逻辑实现。

小结

通过以上步骤，我们成功地用 Vue 3 创建了一个简单的图片画廊。当用户点击缩略图时，模态框会展现大图，用户可以通过按钮切换不同的图片，体验直观且流畅的浏览效果。

通过灵活运用 Vue 3 的新特性和组件化的设计理念，我们不仅能够提高开发效率，还能创建出高可维护性和可复用性的组件。