vue 前端代码实现画廊

要实现画廊，可以使用Vue和一些现有的图片库来实现。

首先，你需要一个Vue组件来展示你的画廊。你可以使用Vue的template来实现，例如：

<template>
  <div class="gallery">
    <div class="gallery__image" v-for="image in images" :key="image.id" @click="showImage(image)">
      <img :src="image.thumbnail" alt="gallery image">
    </div>
  </div>
</template>

在这个模板中，我们使用了一个`v-for`指令来遍历一个名为`images`的数组，并为每个图像创建一个带有缩略图的`<img>`元素。我们还为每个图像绑定了一个`@click`事件，以便在用户点击图像时显示全尺寸图像。

接下来，我们需要在Vue组件的methods中定义`showImage`方法，以便在用户点击图像时显示全尺寸图像。你可以使用一个现有的图片库或者自己写代码来实现。例如，你可以使用Lightbox2图片库：

showImage(image) {
  const options = {
    disableScrolling: true,
    fadeDuration: 200,
    imageFadeDuration: 200,
    resizeDuration: 200,
    wrapAround: true,
    albumLabel: 'Image %1 of %2'
  }

  const images = this.images.map(image => {
    return {
      src: image.fullsize,
      title: image.title
    }
  })

  const currentIndex = images.findIndex(i => i.src === image.fullsize)

  lightbox.open(images, currentIndex, options)
}

在这个方法中，我们首先定义了一些Lightbox2选项。然后我们使用一个map函数将所有图像转换为Lightbox2需要的格式，并使用findIndex函数找到用户点击的图像在数组中的索引。最后，我们调用Lightbox2的open方法来打开全尺寸图像。

最后，我们需要在Vue组件的props中定义`images`属性，以便在组件中使用。你可以使用一个父组件来传入这个属性，例如：

<template>
  <div>
    <h1>My Gallery</h1>
    <my-gallery :images="images"></my-gallery>
  </div>
</template>

<script>
import MyGallery from './MyGallery'

export default {
  components: {
    MyGallery
  },
  data() {
    return {
      images: [
        {
          id: 1,
          thumbnail: 'https://placehold.it/300x200',
          fullsize: 'https://placehold.it/1200x800',
          title: 'Image 1'
        },
        {
          id: 2,
          thumbnail: 'https://placehold.it/300x200',
          fullsize: 'https://placehold.it/1200x800',
          title: 'Image 2'
        },
        {
          id: 3,
          thumbnail: 'https://placehold.it/300x200',
          fullsize: 'https://placehold.it/1200x800',
          title: 'Image 3'
        }
      ]
    }
  }
}
</script>

在这个父组件中，我们定义了一个名为`images`的数组，并将其作为`MyGallery`组件的属性传递。现在，当用户点击画廊中的图像时，它们将会看到全尺寸图像。