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

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

项目结构

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

目录结构
src/
├── components/
│   └── ImageGallery.vue
└── App.vue
  • 1.
  • 2.
  • 3.
  • 4.

示例代码

以下是 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

代码讲解

  1. 数据源：images 数组存储了每个图片的缩略图与全图的 URL 地址，增加图片只需在该数组中添加新对象。
  2. 模态框管理：使用 isModalOpen 变量来管理模态框的显示与隐藏，使用 currentImageIndex 来跟踪当前查看的图片索引。
  3. 打开模态框：openModal 方法接收索引参数，更新当前图片索引并打开模态框。
  4. 关闭模态框：closeModal 方法用于关闭模态框。
  5. 切换图片：prevImage 和 nextImage 方法用于前后切换大图，利用模态框索引的循环逻辑实现。

小结

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

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

最后问候亲爱的朋友们，并诚挚地邀请你们阅读我的全新著作。 书籍简介

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