【Vue3】弹窗添加鼠标hover上边缘左、下的的拉伸宽度高度操作
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;
}
}