vue项目中弹窗拖拽、缩放功能实现过程

// 拖拽 <div ref="resizableBox" ><div class="header"></div></div>
const visible = ref(false)
const position = ref({ x: 200, y: 100 })
const emit = defineEmits(['update:visible', 'closeDialog'])

let dragging = false
let offsetX, offsetY, maxLeft, maxTop

const startDrag = (e) => {
  dragging = true
  offsetX = e.clientX - position.value.x
  offsetY = e.clientY - position.value.y
  document.body.style.userSelect = 'none'; // 防止选中文本

  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}

const onDrag = (e) => {
  if (!dragging) return
  position.value.x = Math.max(0, Math.min(maxLeft,(e.clientX - offsetX)))
  position.value.y = Math.max(0, Math.min(maxTop,(e.clientY - offsetY)))
  console.log(maxLeft,position.value.x,maxTop,position.value.y)
}

const stopDrag = () => {
  dragging = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}


const initDialogPosition = () => {
  // 初始居中：等待 DOM 渲染后计算中心点
  nextTick(() => {
    const dialog = document.querySelector('.header')
    if (dialog) {
      const { innerWidth, innerHeight } = window
      const { offsetWidth, offsetHeight } = dialog as HTMLElement
      maxLeft = innerWidth - offsetWidth
      maxTop = innerHeight - Math.max(560, offsetHeight)
      position.value.x = maxLeft / 2
      position.value.y = maxTop / 3
      console.log('innerWidth', innerWidth, innerHeight)
      console.log('dialog', dialog.getBoundingClientRect())
    }
  })
}

const initDialogPosition = () => {
  // 初始居中：等待 DOM 渲染后计算中心点
  nextTick(() => {
    const dialog = document.querySelector('.header')
    if (dialog) {
      const { innerWidth, innerHeight } = window
      const { offsetWidth, offsetHeight } = dialog as HTMLElement
      maxLeft = innerWidth - offsetWidth
      maxTop = innerHeight - Math.max(560, offsetHeight)
      position.value.x = maxLeft / 2
      position.value.y = maxTop / 3
      console.log('innerWidth', innerWidth, innerHeight)
      console.log('dialog', dialog.getBoundingClientRect())
    }
  })
}

// 缩放  <div ref="resizableBox" ><div class="resizer" @mousedown="initResize"></div></div>
const resizableBox = ref<HTMLElement | null>(null);

function initResize(e: MouseEvent) {
  const box = resizableBox.value;
  if (!box) return;

  const startX = e.clientX;
  const startY = e.clientY;
  const startWidth = box.offsetWidth;
  const startHeight = box.offsetHeight;

  function onMouseMove(event: MouseEvent) {
    const newWidth = Math.max(400, startWidth + (event.clientX - startX));
    const newHeight = Math.max(560, startHeight + (event.clientY - startY));
    box.style.width = `${newWidth}px`;
    box.style.height = `${newHeight}px`;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
}

.resizer {
  width: 14px;
  height: 14px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: se-resize;
  z-index: 10;
  border-radius: 2px;
}