vue3 实现拖动改变左右div宽度

代码：

<template>
            <div class="box" ref="box">
                <div class="left pd20" ref="left1">左边内容 </div>
                <div class="resize" title="收缩侧边栏"></div>
                <div class="mid pd20" ref="mid1"> 右边内容   </div>
                </div>
            </div>
</template>

<script setup>
const left1 = ref()
const mid1 = ref()

//拖动调节左右宽度
function dragControllerDiv() {
    var resize = document.getElementsByClassName('resize')
    var left = document.getElementsByClassName('left')
    var mid = document.getElementsByClassName('mid')
    var box = document.getElementsByClassName('box')
    for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
            //颜色改变提醒
            resize[i].style.background = '#f0f2f5'
            var startX = e.clientX
            resize[i].left = resize[i].offsetLeft
            // 鼠标拖动事件
            document.onmousemove = function (e) {
                var endX = e.clientX
                var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

                if (moveLen < 200) moveLen = 200 // 左边区域的最小宽度为32px
                if (moveLen > maxT - 200) moveLen = maxT - 200 //右边区域最小宽度为150px

                resize[i].style.left = moveLen // 设置左侧区域的宽度
                for (let j = 0; j < left.length; j++) {
                    left[j].style.width = moveLen + 'px'
                    mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
                }
            }
            // 鼠标松开事件
            document.onmouseup = function (evt) {
                //颜色恢复
                resize[i].style.background = '#f0f2f5'
                document.onmousemove = null
                document.onmouseup = null
                resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
            }
            resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
            return false
        }
    }
}

dragControllerDiv()

</script>

<style scoped lang="scss">
        .box {
            box-sizing: border-box;
            width: 100%;
            height: 500px;
            margin: 1% 0px;
            overflow: hidden;
            display: flex;
        }

        /*左侧div样式*/
        .left {
            width: calc(44% - 10px);
            /*左侧初始化宽度*/
            height: 100%;
            background: #ffffff;
            float: left;
            box-sizing: border-box;
            // border-right: 1px solid #d6d6d6;
        }

        /*拖拽区div样式*/
        .resize {
            cursor: col-resize;
            float: left;
            position: relative;
            top: 0;
            padding-top: 20%;
            background-color: #f0f2f5;
            width: 10px;
            height: 100%;
            background-size: cover;
            background-position: center;
            font-size: 32px;
            color: #f0f2f5;
            box-sizing: border-box;
        }

        /*拖拽区鼠标悬停样式*/
        .resize:hover {
            color: #f0f2f5;
        }

        /*右侧div'样式*/
        .mid {
            // border-left: 1px solid #d6d6d6;
            box-sizing: border-box;
            float: left;
            width: 56%;
            /*右侧初始化宽度*/
            height: 100%;
            background: #fff;

            .el-table .el-table__header-wrapper th .el-checkbox {
                display: none;
            }

            .input-number {
                display: inline-block;
                width: 100px;
            }

            .right-content {
                margin-bottom: 10px;
            }
        }

</style>

参考博客：http://t.csdnimg.cn/kX8aZ