vue中实现图片的放大缩小和拖拽

最新推荐文章于 2024-09-27 17:29:39 发布

海绵老呆

最新推荐文章于 2024-09-27 17:29:39 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_37343874/article/details/127965072

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

<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>
import {defineComponent, onMounted, reactive, ref} from 'vue';
export default defineComponent({
  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)
      })
    }
     return {
     	imageItemToDisplay,image,imgWrap,gunLun,moveImg
     }
  }
})