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

最新推荐文章于 2025-02-19 11:13:42 发布

JJCTO袁龙

最新推荐文章于 2025-02-19 11:13:42 发布

阅读量562

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141342853

Vue 专栏收录该内容

749 篇文章

订阅专栏

使用 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>