vue实现图片预览效果

使用 v-viewer 插件实现图片预览

安装 v-viewer 插件：

npm install v-viewer

在 Vue 项目中全局引入：

import VueViewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(VueViewer)

在组件中使用：

<template>
  <div>
    <img v-for="src in images" :src="src" :key="src" v-viewer>
  </div>
</template>

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

自定义图片预览组件

创建可点击放大的图片组件：

<template>
  <div class="image-preview">
    <img 
      v-for="(img, index) in imgs" 
      :key="index" 
      :src="img" 
      @click="showPreview(index)"
      class="preview-image"
    >
    <div v-if="show" class="preview-modal" @click.self="closePreview">
      <img :src="currentImg" class="modal-content">
      <span class="close" @click="closePreview">&times;</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['imgs'],
  data() {
    return {
      show: false,
      currentIndex: 0
    }
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentIndex]
    }
  },
  methods: {
    showPreview(index) {
      this.currentIndex = index
      this.show = true
    },
    closePreview() {
      this.show = false
    }
  }
}
</script>

<style scoped>
.preview-image {
  cursor: pointer;
  margin: 5px;
  max-height: 100px;
}
.preview-modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  max-width: 90%;
  max-height: 90%;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
</style>

使用 Element UI 的图片预览

如果项目中使用 Element UI，可以直接使用其图片预览组件：

<template>
  <div>
    <el-image 
      v-for="(img, index) in images"
      :key="index"
      :src="img"
      :preview-src-list="images"
    ></el-image>
  </div>
</template>

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

实现手势缩放功能

对于需要手势缩放的高级预览功能，可以结合 Hammer.js：

import Hammer from 'hammerjs'

mounted() {
  const image = this.$refs.previewImage
  const hammer = new Hammer(image)

  hammer.get('pinch').set({ enable: true })
  hammer.on('pinch', (e) => {
    // 实现缩放逻辑
    image.style.transform = `scale(${e.scale})`
  })
}

以上方法提供了从简单到复杂的多种图片预览实现方案，可根据项目需求选择合适的方案。