拖动线条改变区域大小

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

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

<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， 右侧最小350pxlet that = this// 获取Dom节点const pageDom = this.$refs.page, moveLineDom = this.$refs.splitLinelet 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 - startXconst maxWidth = pageDom.clientWidth - moveLineDomWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度// 右边区域最小宽度为 rightMinWidthif (moveLen > maxWidth - rightMinWidth) {moveLen = maxWidth - rightMinWidth;}// 限制左边区域的最小宽度为 leftMinWidthif (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>

实现效果如下：