新建组件 -- Enlarge.vue

<template>
  <transition 
    name="fade" 
    mode="out-in">
    <div 
      v-show="url" 
      class="area"
      :style="{
        left: `${x}px`,
        top: `${y}px`
      }">
      <img 
        :src="url" 
        :style="{
          left: `${left}px`, 
          top: `${top}px`,
          width,
          height
        }" >
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      target: null,
      url: null,
      width: 'auto',
      height: 'auto',
      left: 0,
      top: 0,
      x: 0,
      y: 0
    }
  },
  props: {
    scale: {
      type: Number,
      default: 2
    }
  },
  methods: {
    enter(e = {}){
      let { target } = e;
      if(!target) return;
      this.target = target;
      this.target.addEventListener('mousemove', this.move);
      this.target.addEventListener('mouseleave', this.leave);
      this.url = target.getAttribute('src');
      this.width = `${target.offsetWidth * this.scale}px`;
      this.height = `${target.offsetHeight * this.scale}px`;
      //预览放大图片的位置
      let rect = target.getBoundingClientRect();
      this.x = rect.left + target.offsetWidth + 20;
      this.y = rect.top;
    },
    move(e){
      let { offsetX, offsetY } = e;
      this.left = -(offsetX * this.scale - (this.target.offsetWidth / 2));
      this.top = -(offsetY * this.scale - (this.target.offsetHeight / 2));
    },
    leave(){
      this.target.removeEventListener('mousemove', this.move);
      this.url = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.area{
  width: 495px;
  height: 495px;
  position: fixed;
  z-index: 100;
  overflow: hidden;
  background-color: #FFF;
  border: 1px solid #aaa;
  img{
    position: absolute;
    object-fit: contain;
  }
}
.fade-leave-active,
.fade-enter-active {
  transition: all 0.3s;
  opacity: 1;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
</style>

在需要使用的地方引入，并且调用

<template>
  <div>
    <img
      src="/static/img/xxx.jpg"
      @mouseenter="$refs.enlargeRef.enter($event)" />
    <Enlarge
      ref="enlargeRef" />
  </div>
</template>

<script>
import Enlarge from '@/components/Enlarge.vue'
export default {
  components: {
    Enlarge
  }
}
</script>