当前位置：首页 > VUE

vue 实现图片放大

2026-02-18 22:31:53VUE

Vue 实现图片放大功能

使用 CSS transform 和 transition

在 Vue 模板中添加图片元素，通过 CSS 控制放大效果。鼠标悬停时触发放大动画。

<template>
  <div class="image-container">
    <img 
      src="your-image-path.jpg" 
      @mouseover="zoomIn" 
      @mouseout="zoomOut"
      :style="{ transform: scale }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 'scale(1)'
    }
  },
  methods: {
    zoomIn() {
      this.scale = 'scale(1.2)'
    },
    zoomOut() {
      this.scale = 'scale(1)'
    }
  }
}
</script>

<style>
.image-container {
  overflow: hidden;
}
img {
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
}
</style>

使用第三方库 vue-zoomer

vue-zoomer 提供了更丰富的图片放大功能，包括点击放大和鼠标悬停放大。

安装依赖：

npm install vue-zoomer

在组件中使用：

<template>
  <zoomer>
    <img src="your-image-path.jpg"/>
  </zoomer>
</template>

<script>
import { Zoomer } from 'vue-zoomer'

export default {
  components: {
    Zoomer
  }
}
</script>

实现模态框放大效果

点击图片后显示放大的模态框，适合需要查看细节的场景。

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

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

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

<style>
.thumbnail {
  cursor: pointer;
  width: 200px;
}
.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;
}
.enlarged {
  max-width: 80%;
  max-height: 80%;
}
</style>

使用鼠标位置控制放大区域

实现类似放大镜的效果，根据鼠标位置显示图片的特定区域。

<template>
  <div class="magnifier-container">
    <div 
      class="magnifier"
      :style="{
        backgroundImage: `url(${imageUrl})`,
        backgroundPosition: `${-position.x * 2}px ${-position.y * 2}px`
      }"
    ></div>
    <img 
      :src="imageUrl" 
      @mousemove="updatePosition"
      @mouseleave="resetPosition"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image.jpg',
      position: { x: 0, y: 0 }
    }
  },
  methods: {
    updatePosition(e) {
      const rect = e.target.getBoundingClientRect()
      this.position = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      }
    },
    resetPosition() {
      this.position = { x: 0, y: 0 }
    }
  }
}
</script>

<style>
.magnifier-container {
  position: relative;
}
.magnifier {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: 400% 400%;
  pointer-events: none;
  z-index: 10;
  display: none;
}
.magnifier-container:hover .magnifier {
  display: block;
}
</style>