拖动线条改变区域大小

浏览网页时，经常看到这样一个功能，可以通过拖拽线条，改变左右区域大小

     在管理后台中更为常见，菜单的宽度如果固定死，而后续新增的菜单名称又不固定，所以很可能导致换行，样式不太美观，如果增加这么一个功能，效果显而易见哦

<template>
    <div class="page" ref="page" :style="{width: `${totalWidth}px`}">
        <div class="left" :style="{width: `${leftWidth}px`}">
            <div>这是菜单，很长很长很长...</div>
            <div>leftWidth: {{ leftWidth }}</div>
        </div>
        <div class="move_line" ref="splitLine"></div>
        <div class="right" :style="{width: `${rightWidth}px`}">
            <div>这是右侧区域内容</div>
            <div>rightWidth: {{ rightWidth }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            totalWidth: 800,
            leftWidth: 200
        };
    },

    computed: {
        rightWidth(){
            return this.totalWidth - this.leftWidth - 7
        }
    },
    mounted() {
        this.handleStretch()
    },

    methods: { 

        handleStretch(leftMinWidth = 200, rightMinWidth = 350) {
            // 默认左侧最小200px， 右侧最小350px
            let that = this
            // 获取Dom节点
            const pageDom = this.$refs.page, moveLineDom = this.$refs.splitLine
            let moveLineDomWidth = 3
            
            // 鼠标点击, 记录移动的开始位置
            moveLineDom.onmousedown = (e) => {
                const startX = e.clientX; // 记录坐标起始位置
                console.log("start", startX)
                let sidebarInitWidth = that.leftWidth
                // 鼠标移动
                document.onmousemove = (e) => {
                    // console.log("mousemove")
                    const endX = e.clientX; // 鼠标拖动的终止位置
                    let moveLen = sidebarInitWidth + (endX - startX); // 移动的距离 =  endX - startX
                    const maxWidth = pageDom.clientWidth - moveLineDomWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度

                    // 右边区域最小宽度为 rightMinWidth
                    if (moveLen > maxWidth - rightMinWidth) {
                        moveLen = maxWidth - rightMinWidth;
                    }

                    // 限制左边区域的最小宽度为 leftMinWidth
                    if (moveLen < leftMinWidth) {
                        moveLen = leftMinWidth;
                    }


                    // 更新宽度
                    that.leftWidth = moveLen
                };
                // 鼠标松开
                document.onmouseup = () => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    moveLineDom.releaseCapture && moveLineDom.releaseCapture(); // 鼠标捕获释放
                };
                moveLineDom.setCapture && moveLineDom.setCapture(); // 启用鼠标捕获
                return false;
            };
        },
    }
}
</script>

<style lang="scss" scoped>
.page{
    border: solid 2px green;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;

    .move_line {
        width: 3px;
        height: calc(100vh - 48px);
        flex-shrink: 0;
        background-color: #E6EDFF;
        cursor: col-resize;
    }

    .move_line:hover {
        background-color: #409EFF;
    }

    .left, .right{
        padding: 20px;
    }
}
</style>

实现效果如下：