vue图片预览实现

实现图片预览功能

在Vue中实现图片预览功能可以通过多种方式完成，以下是几种常见的方法：

使用第三方库（如viewer.js）

安装viewer.js库：

npm install v-viewer

在Vue组件中使用：

<template>
  <div>
    <img v-for="src in imgs" :src="src" :key="src" v-viewer>
    <button @click="show">预览</button>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'

export default {
  data() {
    return {
      imgs: [
        'image1.jpg',
        'image2.jpg'
      ]
    }
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.imgs
      })
    }
  }
}
</script>

使用Element UI的Image组件

安装Element UI：

npm install element-ui

使用Image组件实现预览：

<template>
  <el-image 
    style="width: 100px; height: 100px"
    :src="url"
    :preview-src-list="srcList">
  </el-image>
</template>

<script>
export default {
  data() {
    return {
      url: 'image.jpg',
      srcList: [
        'image.jpg',
        'image2.jpg'
      ]
    }
  }
}
</script>

自定义实现图片预览

创建简单的图片预览组件：

<template>
  <div>
    <img 
      v-for="(img, index) in images" 
      :src="img" 
      :key="index"
      @click="preview(index)"
      class="thumbnail">

    <div v-if="showPreview" class="preview-modal">
      <span class="close" @click="closePreview">&times;</span>
      <img :src="currentImage" class="preview-image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg'],
      showPreview: false,
      currentImage: ''
    }
  },
  methods: {
    preview(index) {
      this.currentImage = this.images[index]
      this.showPreview = true
    },
    closePreview() {
      this.showPreview = false
    }
  }
}
</script>

<style>
.thumbnail {
  width: 100px;
  height: 100px;
  margin: 5px;
  cursor: pointer;
}

.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.preview-image {
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
</style>

使用PhotoSwipe库

安装PhotoSwipe：

npm install photoswipe

实现示例：

<template>
  <div>
    <div class="gallery" ref="gallery">
      <a 
        v-for="(item, index) in items" 
        :key="index"
        :href="item.src"
        :data-pswp-width="item.width"
        :data-pswp-height="item.height"
        target="_blank">
        <img :src="item.thumbnail" :alt="item.title">
      </a>
    </div>
  </div>
</template>

<script>
import PhotoSwipe from 'photoswipe'
import PhotoSwipeUI from 'photoswipe/dist/photoswipe-ui-default'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'

export default {
  data() {
    return {
      items: [
        {
          src: 'large.jpg',
          thumbnail: 'thumbnail.jpg',
          width: 1200,
          height: 900,
          title: 'Image 1'
        }
      ]
    }
  },
  mounted() {
    const pswpElement = document.querySelectorAll('.pswp')[0]
    const galleryLinks = this.$refs.gallery.querySelectorAll('a')

    galleryLinks.forEach((link, index) => {
      link.onclick = (e) => {
        e.preventDefault()

        const options = {
          index,
          bgOpacity: 0.8,
          showHideOpacity: true
        }

        const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI, this.items, options)
        gallery.init()
      }
    })
  }
}
</script>

以上方法提供了从简单到复杂的多种图片预览实现方案，可以根据项目需求选择合适的方案。第三方库通常提供更多功能和更好的用户体验，而自定义实现则更加灵活可控。