拖动线条改变区域大小

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

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

<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>

实现效果如下：