vue实现画廊

Vue实现画廊功能

在Vue中实现画廊功能可以通过多种方式完成，以下是几种常见方法：

使用第三方库（如vue-gallery） 安装vue-gallery库：

npm install vue-gallery --save

在组件中使用：

<template>
  <gallery :images="images" :index="index" @close="index = null"></gallery>
</template>

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

自定义实现基础画廊

创建可点击缩略图展示大图的组件：

<template>
  <div class="gallery">
    <div v-for="(image, i) in images" :key="i" @click="showImage(i)">
      <img :src="image.thumb" alt="thumbnail">
    </div>
    <div v-if="currentImage !== null" class="lightbox" @click="currentImage = null">
      <img :src="images[currentImage].full" alt="full image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { thumb: 'thumb1.jpg', full: 'full1.jpg' },
        { thumb: 'thumb2.jpg', full: 'full2.jpg' }
      ],
      currentImage: null
    }
  },
  methods: {
    showImage(index) {
      this.currentImage = index;
    }
  }
}
</script>

<style>
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用Swiper实现响应式画廊

安装Swiper：

npm install swiper vue-awesome-swiper

实现代码：

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: true
      }
    }
  }
}
</script>

实现带缩略图导航的画廊

结合主图和缩略图列表：

<template>
  <div class="gallery-container">
    <div class="main-image">
      <img :src="images[currentIndex]">
    </div>
    <div class="thumbnails">
      <div v-for="(image, index) in images" 
           :key="index" 
           @click="currentIndex = index"
           :class="{active: currentIndex === index}">
        <img :src="image">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0
    }
  }
}
</script>

<style>
.thumbnails {
  display: flex;
}
.thumbnails div {
  margin: 5px;
  cursor: pointer;
}
.thumbnails .active {
  border: 2px solid blue;
}
.main-image img {
  max-width: 100%;
}
</style>

这些方法可以根据项目需求选择使用，第三方库提供更多功能但增加依赖，自定义实现更灵活但需要更多开发工作。