当前位置：首页 > VUE

vue 实现图片放大

2026-01-18 06:07:45VUE

使用 Vue 实现图片放大功能

基础实现：CSS 放大

通过 CSS 的 transform: scale() 和 transition 实现简单的鼠标悬停放大效果。

<template>
  <div class="image-container">
    <img 
      src="your-image.jpg" 
      @mouseover="zoomIn" 
      @mouseout="zoomOut"
      :style="imgStyle"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isZoomed: false
    }
  },
  computed: {
    imgStyle() {
      return {
        transform: this.isZoomed ? 'scale(1.5)' : 'scale(1)',
        transition: 'transform 0.3s ease'
      }
    }
  },
  methods: {
    zoomIn() {
      this.isZoomed = true
    },
    zoomOut() {
      this.isZoomed = false
    }
  }
}
</script>

<style scoped>
.image-container {
  overflow: hidden;
  width: 300px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

使用第三方库：vue-zoomer

对于更复杂的交互（如点击放大、拖拽查看细节），可以使用专用库如 vue-zoomer。

安装依赖：

npm install vue-zoomer

实现代码：

<template>
  <zoomer
    style="width: 500px; height: 300px"
    :zoomed="zoomed"
    @shrink="zoomed = false"
  >
    <img src="your-image.jpg" @click="zoomed = true"/>
  </zoomer>
</template>

<script>
import { Zoomer } from 'vue-zoomer'
export default {
  components: { Zoomer },
  data() {
    return {
      zoomed: false
    }
  }
}
</script>

模态框放大方案

通过模态框实现全屏查看，适合需要查看高清细节的场景。

vue 实现图片放大

<template>
  <div>
    <img 
      src="thumbnail.jpg" 
      @click="showModal = true"
      class="thumbnail"
    />

    <div v-if="showModal" class="modal" @click="showModal = false">
      <img src="fullsize-image.jpg" class="fullsize-image"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style scoped>
.thumbnail {
  width: 200px;
  cursor: pointer;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullsize-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
</style>