当前位置：首页 > VUE

vue实现画廊

2026-01-13 03:38:39VUE

Vue 实现画廊功能

使用 Vue 实现画廊功能可以通过多种方式完成，以下是一个常见的实现方案，结合 Vue 和第三方库（如 vue-gallery 或自定义组件）来展示图片集合。

安装依赖

如果需要使用现成的画廊组件库，可以安装 vue-gallery 或其他类似插件：

npm install vue-gallery --save

基本画廊实现

以下是一个简单的画廊实现示例，使用 Vue 和原生 JavaScript 实现图片切换功能：

<template>
  <div class="gallery">
    <div class="main-image">
      <img :src="currentImage" alt="Gallery Image" />
    </div>
    <div class="thumbnails">
      <img
        v-for="(image, index) in images"
        :key="index"
        :src="image.thumbnail"
        @click="setCurrentImage(image.full)"
        :class="{ active: currentImage === image.full }"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: "",
      images: [
        { full: "/path/to/image1.jpg", thumbnail: "/path/to/thumbnail1.jpg" },
        { full: "/path/to/image2.jpg", thumbnail: "/path/to/thumbnail2.jpg" },
        { full: "/path/to/image3.jpg", thumbnail: "/path/to/thumbnail3.jpg" },
      ],
    };
  },
  mounted() {
    if (this.images.length > 0) {
      this.currentImage = this.images[0].full;
    }
  },
  methods: {
    setCurrentImage(image) {
      this.currentImage = image;
    },
  },
};
</script>

<style>
.gallery {
  max-width: 800px;
  margin: 0 auto;
}
.main-image img {
  width: 100%;
  height: auto;
}
.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.thumbnails img {
  width: 80px;
  height: 60px;
  cursor: pointer;
  opacity: 0.7;
}
.thumbnails img.active {
  opacity: 1;
  border: 2px solid #42b983;
}
</style>

使用 vue-gallery 插件

如果需要更丰富的功能（如全屏、滑动等），可以使用 vue-gallery 插件：

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div class="preview">
      <img
        v-for="(image, imageIndex) in images"
        :key="imageIndex"
        :src="image"
        @click="index = imageIndex"
      />
    </div>
  </div>
</template>

<script>
import VueGallery from "vue-gallery";
export default {
  components: {
    gallery: VueGallery,
  },
  data() {
    return {
      images: [
        "/path/to/image1.jpg",
        "/path/to/image2.jpg",
        "/path/to/image3.jpg",
      ],
      index: null,
    };
  },
};
</script>

<style>
.preview {
  display: flex;
  gap: 10px;
}
.preview img {
  width: 100px;
  height: 80px;
  cursor: pointer;
}
</style>

响应式画廊

如果需要响应式布局，可以使用 CSS Grid 或 Flexbox 动态调整图片排列：

<template>
  <div class="responsive-gallery">
    <img
      v-for="(image, index) in images"
      :key="index"
      :src="image"
      @click="openLightbox(index)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "/path/to/image1.jpg",
        "/path/to/image2.jpg",
        "/path/to/image3.jpg",
      ],
      lightboxIndex: null,
    };
  },
  methods: {
    openLightbox(index) {
      this.lightboxIndex = index;
    },
  },
};
</script>

<style>
.responsive-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.responsive-gallery img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s;
}
.responsive-gallery img:hover {
  transform: scale(1.05);
}
</style>

懒加载优化

对于大量图片，可以使用懒加载技术（如 vue-lazyload）提升性能：

npm install vue-lazyload --save

<template>
  <div class="gallery">
    <img
      v-for="(image, index) in images"
      :key="index"
      v-lazy="image"
      @click="openLightbox(index)"
    />
  </div>
</template>

<script>
import VueLazyload from "vue-lazyload";
export default {
  directives: {
    lazy: VueLazyload,
  },
  data() {
    return {
      images: [
        "/path/to/image1.jpg",
        "/path/to/image2.jpg",
        "/path/to/image3.jpg",
      ],
    };
  },
};
</script>

通过以上方法，可以实现一个功能完善、响应式的 Vue 画廊。

vue实现画廊