vue实现放大镜原理

Vue实现放大镜原理

放大镜效果通常用于电商网站展示商品细节，其核心原理是通过鼠标移动控制放大区域的显示。以下是基于Vue的实现方法：

基本结构设计

需要两个关键元素：原图容器和放大镜预览容器。原图容器包含小图和一个跟随鼠标的遮罩层，预览容器显示放大后的图像。

<template>
  <div class="magnifier-container">
    <div class="original-img" @mousemove="handleMouseMove" @mouseleave="hideMagnifier">
      <img :src="smallImg" ref="smallImg">
      <div class="mask" v-show="showMask" :style="maskStyle"></div>
    </div>
    <div class="preview" v-show="showPreview" :style="previewStyle"></div>
  </div>
</template>

计算遮罩位置

通过鼠标事件获取坐标，计算遮罩层位置。遮罩层大小通常固定，需限制其在原图范围内移动。

data() {
  return {
    showMask: false,
    showPreview: false,
    maskStyle: {
      left: '0px',
      top: '0px'
    },
    previewStyle: {
      backgroundImage: `url(${this.largeImg})`,
      backgroundPosition: '0 0'
    }
  }
},
methods: {
  handleMouseMove(e) {
    this.showMask = true
    this.showPreview = true

    const smallImg = this.$refs.smallImg
    const container = e.currentTarget
    const containerRect = container.getBoundingClientRect()

    // 计算遮罩位置
    const maskWidth = 100
    const maskHeight = 100
    let left = e.clientX - containerRect.left - maskWidth / 2
    let top = e.clientY - containerRect.top - maskHeight / 2

    // 边界限制
    left = Math.max(0, Math.min(left, smallImg.width - maskWidth))
    top = Math.max(0, Math.min(top, smallImg.height - maskHeight))

    this.maskStyle = {
      left: `${left}px`,
      top: `${top}px`,
      width: `${maskWidth}px`,
      height: `${maskHeight}px`
    }

    // 同步更新预览区域
    this.updatePreview(left, top)
  }
}

更新预览区域

根据遮罩位置计算大图的显示区域，通过背景图位移实现放大效果。放大倍数由大图和小图尺寸比例决定。

methods: {
  updatePreview(left, top) {
    const smallImg = this.$refs.smallImg
    const scale = 2 // 放大倍数

    const bgPosX = -left * scale
    const bgPosY = -top * scale

    this.previewStyle = {
      backgroundImage: `url(${this.largeImg})`,
      backgroundPosition: `${bgPosX}px ${bgPosY}px`,
      backgroundSize: `${smallImg.width * scale}px ${smallImg.height * scale}px`
    }
  },
  hideMagnifier() {
    this.showMask = false
    this.showPreview = false
  }
}

样式设置

CSS样式需要确保预览区域与遮罩层同步移动，并设置合适的层级关系。

.magnifier-container {
  display: flex;
}

.original-img {
  position: relative;
  cursor: crosshair;
}

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

.preview {
  width: 300px;
  height: 300px;
  margin-left: 20px;
  border: 1px solid #eee;
  overflow: hidden;
}

参数配置

组件应接受小图和大图的路径作为props，并可配置放大倍数等参数。

props: {
  smallImg: {
    type: String,
    required: true
  },
  largeImg: {
    type: String,
    required: true
  },
  scale: {
    type: Number,
    default: 2
  }
}

通过以上步骤，可以实现一个基本的Vue放大镜组件。实际应用中可根据需求添加动画效果、多图切换等功能增强用户体验。