vue3 div实现鼠标拖拽放大缩小

完整代码如下：

<template>
<div :style="{ width: movePosition.x + 640 + 'px', height: moveposition.y + 410 + 'px', border: 'px solid #ccc' }" @mousedown="handleMouseDown" id="editor-box" ref="splitPaneRef">
    <!-- 八个角的鼠标放上的样式 -->
    <div class="left-top-box"></div>
    <div Class="left-bottom-box"></div>
    <div class="right-bottom-box"></div>
    <div class="top-up-box"></div>
    <div class="top-bottom-box"></div>
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>
</template>
<script setup lang="ts" name="demo">
import { ref } from 'vue'
const defaultPosition = ref() // ref值
const movePosition = ref({
    x:0,
    y:0
})// ref值

/按下滑动器
const handleMouseDown = (e: any) => {
    document.addEventListener( 'mousemove' , handleMouseMove)
    document.addEventListener( 'mouseup' ,handleMouseUp)
    / const clientRect = splitPaneRef.value.getBoundingClientRect()
    //let editorBox: any = document.getElementById('editor-box')
    // editorBox.style.cursor = 'crosshairt'
    defaultPosition.value = {
        x: e.clientX,
        y: e.clientY,
    }
}

/按下滑动器后移动鼠标
const handleMouseMove = (e: any) => {
    let X = e.clientX - defaultPosition.value.x
    let y = e.clientY - defaultPosition.value.y
    if(x!==0 &7 y!==0){
        movePosition.value = {
            x,
            y,
        }
    }
}

// 松开滑动器
const handleMouseUp = () => {
    document.removeEventListener('mousemove",handleMouseMove)
}
</script>

<style scoped lang="scss">
    #editor-box {
        position:relative;
        .left-top-box {
            position: absolute;
            top: 0;
            left: 0;
            cursor: nw-resize;
            width: 10px;
            height: 10px;
        }
        .left-bottom-box (
            position: absolute;
            bottom: 0;
            left: 0;
            cursor: sw-resize;
            width: 10px;
            height: 10px;
        }
        .right-top-box {
            position: absolute;
            top: 0;
            right: 0;
            cursor: ne-resize;
            width: 10px;
            height: 10px;
        }
        .right-bottom-box {
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: se-resize;
            width: 10px;
            height: 10px;
        }
        .top-up-box {
            position: absolute;
            top: 0;
            left: 10px;
            cursor: n-resize;
            width: calc(100% - 20px);
            height: 10px;
        }
        .top-bottom-box {
            position: absolute;
            bottom: 0;
            left: 10px;
            cursor: s-resize;
            width: calc(100% - 20px);
            height: 10px;
        }
        .left-box {
            position: absolute;
            top: 10px;
            left: 0px;
            cursor: w-resize;
            width: 10px;
            height: calc(100% - 20px);
        }
        .right-box {
            position: absolute;
            top: 10px;
            right: 0px;
            cursor: e-resize;
            width: 10px;
            height: calc(100% - 20px);
        }
    }
</style>