当前位置：首页 > VUE

vue实现放大镜

2026-01-20 03:29:05VUE

实现放大镜效果的基本思路

放大镜效果通常用于电商网站的商品展示，通过鼠标悬停在小图上时，显示对应区域的大图。Vue中可以通过监听鼠标事件和动态计算位置实现。

创建组件结构

<template>
  <div class="magnifier-container">
    <div class="small-img" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
      <img :src="smallImg" alt="商品图片">
      <div class="magnifier" v-show="showMagnifier" :style="magnifierStyle"></div>
    </div>
    <div class="large-img" v-show="showMagnifier">
      <img :src="largeImg" :style="largeImgStyle" alt="放大图片">
    </div>
  </div>
</template>

定义组件数据

<script>
export default {
  props: {
    smallImg: String,
    largeImg: String
  },
  data() {
    return {
      showMagnifier: false,
      magnifierStyle: {
        left: '0px',
        top: '0px'
      },
      largeImgStyle: {
        position: 'relative'
      }
    }
  },
  methods: {
    handleMouseMove(e) {
      this.showMagnifier = true
      // 计算放大镜位置
      const container = e.currentTarget
      const rect = container.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

      // 确保放大镜不超出边界
      const magnifierWidth = 100
      const magnifierHeight = 100
      let left = x - magnifierWidth / 2
      let top = y - magnifierHeight / 2

      left = Math.max(0, Math.min(left, rect.width - magnifierWidth))
      top = Math.max(0, Math.min(top, rect.height - magnifierHeight))

      this.magnifierStyle = {
        left: `${left}px`,
        top: `${top}px`,
        width: `${magnifierWidth}px`,
        height: `${magnifierHeight}px`
      }

      // 计算大图位置
      const scaleX = (this.$refs.largeImg.width - rect.width) / (rect.width - magnifierWidth)
      const scaleY = (this.$refs.largeImg.height - rect.height) / (rect.height - magnifierHeight)

      this.largeImgStyle = {
        left: `-${left * scaleX}px`,
        top: `-${top * scaleY}px`
      }
    },
    handleMouseLeave() {
      this.showMagnifier = false
    }
  }
}
</script>

添加样式

<style scoped>
.magnifier-container {
  display: flex;
}

.small-img {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ddd;
  cursor: crosshair;
}

.small-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magnifier {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid #ccc;
  pointer-events: none;
}

.large-img {
  width: 400px;
  height: 400px;
  margin-left: 20px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.large-img img {
  position: absolute;
  max-width: none;
}
</style>

使用组件

在父组件中引入并使用放大镜组件：

vue实现放大镜

<template>
  <magnifier 
    :small-img="require('@/assets/small.jpg')" 
    :large-img="require('@/assets/large.jpg')"
  />
</template>

<script>
import Magnifier from '@/components/Magnifier.vue'

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