vue实现拖动调整左右两侧容器大小 vue实现拖动调整左右两侧容器

本文实例为大家分享了vue实现拖动调整左右两侧容器大小的具体代码，供大家参考，具体内容如下

文章图片

页面布局

拖拽方法

drapContent() {// 获取左边区域的宽度let left = document.getElementById('left'); // 获取移动区域的宽度let line = document.getElementById('line'); // 获取右边区域的宽度let right = document.getElementById('right'); // 移动区域鼠标移入事件line.onmousedown = function(e) {// 移动的距离let lineLeft = e.clientX; document.onmousemove = function(e) {// 移动的位置（侧边栏的宽度 + 移动的宽度）let diffVal = 276 + (e.clientX -lineLeft); // 移动区间的范围 [276, 740]if(diffVal >= 276 && diffVal <= 840) {// 移动区域距离左边的距离line.style.left = diffVal+'px'; // 左边缩放的宽度left.style.width = diffVal +'px'; // 右边改变后的宽度（改变后的宽度要加上移动区域的宽度）right.style.width = document.getElementById('product').clientWidth - (diffVal + 16) +'px'; }}document.onmouseup = function() {document.onmousemove = null; document.onmouseup = null; }}}

【vue实现拖动调整左右两侧容器大小】在vue里面使用记得将方法在mounted中调用一下：

文章图片

样式

.content {display: flex; width: 100%; height: 100%; }.left {width: 260px; height: 100%; }.resize-line {/*鼠标移入显示左右箭头*/cursor: ew-resize; width: 16px; min-width: 16px; max-width: 16px; background-color: transparent; }.right {width: calc(100% - 276px); max-width: calc(100% - 276px); user-select: none; }.ant-layout {height: calc(100vh - 181px); }:deep(.top-search .ant-form-item label) {min-width: 72px; }:deep(.ant-layout-sider) {flex: 0 0 100%; max-width: 100% !important; min-width: 260px !important; width: 100% !important; user-select: none; }.width-auto .tree-layout-sider {height: calc(100vh - 181px); overflow-x: hidden; overflow-y: auto; padding-left: 8px !important; padding-right: 0 !important; }.width-auto li li .ant-tree-title {width: 100% !important; }:deep(.ant-tree.ant-tree-block-node li .ant-tree-node-content-wrapper) {overflow: hidden; text-overflow: ellipsis; word-break: break-word; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。