需求

鼠标移动上去可以拖拽容器宽度和高度

代码

省略了一些代码，但应该都看得懂吧~就是两条线添加 mousedown 事件，记得 mousemove 要挂载到 document 上！！！

<div class="line-w" @mousedown="startResize('width')"></div>
<div class="line-h" @mousedown="startResize('height')"></div>

const containerWidth = ref(500);
const containerHeight = ref(640);
const isResizing = ref(false);
const resizeDirection = ref('');
const contentRef = ref<HTMLElement>();
function startResize(direction: string) {isResizing.value = true;resizeDirection.value = direction;document.onselectstart = () => false;document.ondragstart = () => false;document.addEventListener('mousemove', onMouseMove);document.addEventListener('mouseup', onMouseup);
}function onMouseup() {console.log('mouseup');isResizing.value = false;document.onselectstart = null;document.ondragstart = null;document.removeEventListener('mousemove', onMouseMove);document.removeEventListener('mouseup', onMouseup);
}function onMouseMove(e: MouseEvent) {console.log('mousemove');if (!isResizing.value) return;const { clientX, clientY } = e;if (resizeDirection.value === 'width') {const w = contentRef.value.getBoundingClientRect().right - clientX;containerWidth.value = w < 450 ? 450 : w;} else {const h = clientY - contentRef.value.getBoundingClientRect().top;containerHeight.value = h < 640 ? 640 : h;}
}

参考

JS拖拽不流畅、鼠标滑动太快导致拖拽物脱离鼠标问题