Vue-实现商品放大镜效果

PC端逛淘宝点进商品详情，鼠标挪到图片上右侧可见鼠标所到处细节放大，现在来掰扯掰扯↓↓↓↓↓↓

效果图：

步骤解析：
1、创建一个大盒子，里面放左右两个大小相同的盒子
2、左边放入图片、鼠标遮罩层和图片遮罩层，右边放入图片
3、写样式，左边：图片遮罩层和图片大小一样大，右边：图片给其大小超过左边图片，超出右边容器的部分隐藏，具体样式见底部
4、功能实现

HTML:

js:

代码自提处：
js:

<script>
export default {
  name: 'TheHome',
  data () {
    return {
      mouseMaskShow: false,
      imgMaskShow: false,
      mouseMove: { transform: ''},
      imgMove: {}
    }
  },
  methods: {
    mouseenterChange () {
      this.imgMaskShow = true
      this.mouseMaskShow = true
    },
    mousemoveChange (i) {
      console.log('指针移动', i)
      //鼠标位置
      let x = i.offsetX
      let y = i.offsetY
      //限制鼠标层罩，限制其无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100
      let topY = y - 100 < 0 ? 0 : y - 100
      //限制鼠标层罩，限制其无法超出原图区域
      if (topX > 600) {
        topX = 600
      }
      if (topY > 400) {
        topY = 400
      }
      //通过tranform移动鼠标层罩和右侧图片位置
      this.mouseMove.transform = `translate(${topX}px,${topY}px)`
      this.imgMove.transform = `translate(-${0.5 * topX}px,-${0.7 * topY}px)`
    },
    mouseoutChange () {
      this.imgMaskShow = false
      this.mouseMaskShow = false
    }
  }
}
</script>

css:

<style scoped lang="scss">
  .the-home-container {
    .the-home-container-box-one {
      display: flex;
      height: 100%;
      width: 100%;

      .the-home-left {
        margin-right: 8px;
        width: 600px;
        height: 400px;
        border: 1px solid teal;

        .image-style {
          width: 600px;
          height: 400px;
        }

        .mouse-mask {
          width: 100px;
          height: 100px;
          background: rgba(158, 57, 48, 0.5);
          position: absolute;
          top: 8px;
          left: 8px;
        }

        .image-box-mask {
          width: 600px;
          height: 400px;
          position: absolute;
          z-index: 1;
          top: 8px;
          left: 8px;
        }
      }

      .the-home-right {
        margin-right: 8px;
        width: 600px;
        height: 400px;
        border: 1px solid pink;
        position: relative;
        overflow: hidden;

        .image-size-style {
          width: 1000px;
          height: 600px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }

    .the-home-container-box-two {
      width: 500px;
      height: 300px;
    }
  }
</style>