怎么用Vue3实现图片放大框选

要实现图片放大框选，需要使用 Vue3 的指令及事件监听来实现。下面是具体的实现步骤：

1. 在 Vue3 中创建一个组件，用来显示图片和实现放大框选。

2. 在组件中添加一个 img 元素用来显示图片，并添加一个 div 元素来实现放大框选。

3. 在组件中添加一个指令 v-drag，用来实现拖拽功能。

4. 在组件中添加 mouseup、mousedown、mousemove 事件监听，用来实现放大框选功能。当鼠标按下时，记录下鼠标位置，当鼠标移动时，根据鼠标位置计算出放大框的大小及位置，并更新 div 元素的样式。

5. 在组件中添加一个方法 zoomIn，用来实现图片放大的功能。当放大框选完成后，获取放大框的位置及大小，计算出图片的放大比例，根据比例更新 img 元素的样式。

6. 在组件中添加一个按钮或其他元素，用来触发 zoomIn 方法。

以下是示例代码（仅供参考）：

<template>
  <div class="image-zoom">
    <img v-drag src="your-image-url" ref="image" />
    <div class="zoom-box" :style="zoomBoxStyle"></div>
    <button @click="zoomIn">放大</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  directives: {
    drag: {
      // 拖拽指令实现
      mounted(el) {
        let isDragging = false
        let startX = 0
        let startY = 0
        let initialX = 0
        let initialY = 0
        let xOffset = 0
        let yOffset = 0

        el.addEventListener('mousedown', dragStart)
        el.addEventListener('mouseup', dragEnd)
        el.addEventListener('mousemove', drag)

        function dragStart(e) {
          initialX = e.clientX - xOffset
          initialY = e.clientY - yOffset

          if (e.target === el) {
            isDragging = true
          }
        }

        function dragEnd(e) {
          initialX = currentX
          initialY = currentY

          isDragging = false
        }

        function drag(e) {
          if (isDragging) {
            e.preventDefault()

            currentX = e.clientX - initialX
            currentY = e.clientY - initialY

            xOffset = currentX
            yOffset = currentY

            setTranslate(currentX, currentY, el)
          }
        }

        function setTranslate(xPos, yPos, el) {
          el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`
        }
      }
    }
  },
  setup() {
    const zoomBoxStyle = ref({
      top: '0',
      left: '0',
      width: '0',
      height: '0'
    })

    const zoomIn = () => {
      const image = this.$refs.image
      const zoomBox = this.$el.querySelector('.zoom-box')

      const imgWidth = image.clientWidth
      const imgHeight = image.clientHeight

      const boxWidth = zoomBox.clientWidth
      const boxHeight = zoomBox.clientHeight

      const boxLeft = zoomBox.offsetLeft - image.offsetLeft
      const boxTop = zoomBox.offsetTop - image.offsetTop

      const zoomWidth = imgWidth / boxWidth
      const zoomHeight = imgHeight / boxHeight

      const zoomX = imgWidth / (imgWidth - boxLeft * 2)
      const zoomY = imgHeight / (imgHeight - boxTop * 2)

      const zoom = Math.min(zoomWidth, zoomHeight, zoomX, zoomY)

      image.style.transform = `scale(${zoom})`
      image.style.transformOrigin = `${(boxLeft + boxWidth / 2) / imgWidth * 100}% ${(boxTop + boxHeight / 2) / imgHeight * 100}%`
    }

    const handleMouseDown = (e) => {
      const zoomBox = this.$el.querySelector('.zoom-box')
      zoomBoxStyle.value.left = e.clientX + 'px'
      zoomBoxStyle.value.top = e.clientY + 'px'
      zoomBoxStyle.value.width = '0'
      zoomBoxStyle.value.height = '0'
      document.addEventListener('mousemove', handleMouseMove)
    }

    const handleMouseMove = (e) => {
      const zoomBox = this.$el.querySelector('.zoom-box')
      const startX = parseInt(zoomBoxStyle.value.left)
      const startY = parseInt(zoomBoxStyle.value.top)
      const endX = e.clientX
      const endY = e.clientY
      const width = Math.abs(endX - startX)
      const height = Math.abs(endY - startY)
      const left = Math.min(startX, endX)
      const top = Math.min(startY, endY)
      zoomBoxStyle.value.left = left + 'px'
      zoomBoxStyle.value.top = top + 'px'
      zoomBoxStyle.value.width = width + 'px'
      zoomBoxStyle.value.height = height + 'px'
    }

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove)
    }

    return {
      zoomBoxStyle,
      zoomIn,
      handleMouseDown,
      handleMouseUp
    }
  },
  mounted() {
    document.addEventListener('mouseup', this.handleMouseUp)
  },
  beforeUnmount() {
    document.removeEventListener('mouseup', this.handleMouseUp)
  }
}
</script>

<style>
.image-zoom {
  position: relative;
}

.zoom-box {
  position: absolute;
  border: 1px solid red;
  pointer-events: none;
}

button {
  margin-top: 10px;
}
</style>