vue实现图片预览放大

实现图片预览放大功能

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

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

安装viewer.js库：

npm install v-viewer

在Vue组件中使用：

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

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

Vue.use(VueViewer)

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

自定义实现放大功能

创建一个可复用的图片放大组件：

<template>
  <div class="image-container">
    <img 
      :src="src" 
      @click="showModal = true"
      class="thumbnail"
    >
    <div v-if="showModal" class="modal" @click="showModal = false">
      <img :src="src" class="enlarged-image">
    </div>
  </div>
</template>

<script>
export default {
  props: ['src'],
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.thumbnail {
  cursor: zoom-in;
  max-width: 200px;
}

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

.enlarged-image {
  max-width: 80%;
  max-height: 80%;
}
</style>

使用CSS transform实现平滑缩放

添加CSS过渡效果：

<template>
  <div class="zoom-container">
    <img 
      :src="src" 
      @mouseover="zoomIn"
      @mouseout="zoomOut"
      :style="{ transform: zoomScale }"
    >
  </div>
</template>

<script>
export default {
  props: ['src'],
  data() {
    return {
      scale: 1
    }
  },
  computed: {
    zoomScale() {
      return `scale(${this.scale})`
    }
  },
  methods: {
    zoomIn() {
      this.scale = 1.5
    },
    zoomOut() {
      this.scale = 1
    }
  }
}
</script>

<style>
.zoom-container {
  overflow: hidden;
  display: inline-block;
}

.zoom-container img {
  transition: transform 0.3s ease;
}
</style>

实现图片画廊预览功能

对于多图片预览场景：

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

    <div v-if="galleryOpen" class="gallery-modal">
      <button @click="prevImage">❮</button>
      <img :src="images[currentIndex].full">
      <button @click="nextImage">❯</button>
      <button @click="galleryOpen = false" class="close">×</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { thumbnail: 'thumb1.jpg', full: 'full1.jpg' },
        { thumbnail: 'thumb2.jpg', full: 'full2.jpg' }
      ],
      galleryOpen: false,
      currentIndex: 0
    }
  },
  methods: {
    openGallery(index) {
      this.currentIndex = index
      this.galleryOpen = true
    },
    prevImage() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
    }
  }
}
</script>

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  cursor: pointer;
}

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

.gallery-modal img {
  max-height: 80vh;
  max-width: 80vw;
}

.gallery-modal button {
  color: white;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>

以上方法可以根据项目需求选择使用，第三方库提供更全面的功能，自定义实现则更灵活轻量。