vue图片随着鼠标的滑动变大缩小并实现拖拽

<template>
  <div v-if="popupVisible" class="image-back" @mousewheel.prevent="gunLun">
    <div :style="imageItemToDisplay.data" class="image-inner" ref="imgWrap">
      <i class="iconfont icon-cha11" @click="closeImage"></i>
      <img :src="imageItemToDisplay.url" class="photo-popup-image" id="oImage" ref="image" alt="" @mousedown.prevent="moveImg">
    </div>
  </div>
</template>

<script setup>
	const imageItemToDisplay = reactive({
	  url: '',
	  delta: 1,
	  data: ''
	})
	const image = ref(null)
	const imgWrap = ref(null)
	// 图片缩放
	const gunLun = (e) => {
	  imageItemToDisplay.delta += e.wheelDelta / 1200;
	  if (imageItemToDisplay.delta > 0.1 && imageItemToDisplay.delta < 2.0) {
	    imageItemToDisplay.data = `transform:scale(${imageItemToDisplay.delta});`
	  }
	}
	// 拖拽图片
	const moveImg = (e) => {
	  let wrap = imgWrap.value
	  let img = image.value
	  let x = e.pageX - img.offsetLeft
	  let y = e.pageY - img.offsetTop
	  // 添加鼠标移动事件
	  wrap.addEventListener('mousemove', move)
	  function move(e) {
	    wrap.style.left = e.pageX - x + 'px'
	    wrap.style.top = e.pageY - y + 'px'
	  }
	  // 添加鼠标抬起事件，鼠标抬起，将事件移除
	  img.addEventListener('mouseup', () => {
	    wrap.removeEventListener('mousemove', move)
	  })
	  // 鼠标离开父级元素，把事件移除
	  wrap.addEventListener('mouseout', () => {
	    wrap.removeEventListener('mousemove', move)
	  })
	}
</script>

<style scoped lang="scss">
.image-back{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0000005e;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  .image-inner{
    position: relative;
    .iconfont{
      position: absolute;
      right: -13px;
      top: -12px;
      cursor: pointer;
      font-size: 20px;
      display: none;
    }
  }
  .image-inner:hover > .iconfont{
    color: #d43f3a;
    display: block;
  }
}
</style>