vue-element-admin 简单实现仿淘宝实现商品图片放大镜效果

1、HTML

<template>
  <div v-loading="Loading" class="goodsUpload">
    <!-- 商品图片 -->
    <div class="mainImage">
      <!-- 图片 -->
      <el-image class="imageItem" title="点击大图预览" :src="imageUrl" fit="contain" />
      <!-- 鼠标层罩 -->
      <div v-show="coverLayerShow" class="coverLayerMouse" :style="coverLayerStyle"></div>
      <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
      <div class="coverLayerMaskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler">
      </div>
      <!-- 放大的图片 -->
      <div v-show="coverLayerShow" class="coverLayerRight">
        <el-image :style="coverLayerImg" class="coverLayerRightImg" :src="imageUrl" fit="contain" />
      </div>
    </div>
    <!-- 商品图片 -->
  </div>
</template>

2、JS

<script>
  export default {
    name: 'GoodsUpload',
    data() {
      return {
        // 商品图片
        imageUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
        Loading: false,
        coverLayerStyle: {
          transform: ""
        },
        coverLayerImg: {},
        coverLayerShow: false,

      }
    },
    created() {

    },
    methods: {
      // 鼠标进入原图空间函数
      enterHandler() {
        // 层罩及放大空间的显示
        this.coverLayerShow = true;
      },
      // 鼠标移动函数
      moveHandler(event) {
        // 鼠标的坐标位置
        let x = event.offsetX;
        let y = event.offsetY;
        // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
        let topX = x - 100 < 0 ? 0 : x - 100;
        let topY = y - 100 < 0 ? 0 : y - 100;
        // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
        if (topX > 200) {
          topX = 200;
        }
        if (topY > 200) {
          topY = 200;
        }
        // 通过 transform 进行移动控制
        this.coverLayerStyle.transform = `translate(${topX}px,${topY}px)`;
        this.coverLayerImg.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
      },
      // 鼠标移出函数
      outHandler() {
        // 控制层罩与放大空间的隐藏
        this.coverLayerShow = false;
      },

    }
  }
</script>

3、CSS

<style scoped>
  .mainImage {
    width: 400px;
    height: 400px;
    position: relative;
  }

  .mainImage .imageItem {
    border: 1px solid #DCDCDC;
    width: 400px;
    height: 400px;
    position: relative;
  }

  /* 放大的图片，通过定位将左上角定位到(0,0) */
  .coverLayerRightImg {
    display: inline-block;
    width: 800px;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 右边的区域图片放大空间 */
  .coverLayerRight {
    background-color: #FFFFFF;
    width: 400px;
    height: 400px;
    border: 1px solid #DCDCDC;
    position: relative;
    overflow: hidden;
    position: absolute;
    left: 412px;
    top: 0;
    z-index: 1001;
  }

  /* 一个最高层层罩 */
  .coverLayerMaskTop {
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    cursor: move;
  }

  /* 层罩，通过定位将左上角定位到(0,0) */
  .coverLayerMouse {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>