本文实例为大家分享了vue实现拖动调整左右两侧容器大小的具体代码,供大家参考,具体内容如下
页面布局
<template> <a-layout class="width-auto" id="product"> <div class="content"> <div id="left" class="left"> 左侧 </div> <div id="line" class="resize-line"></div> <div id="right" class="right"> 右侧 </div> </div> </a-layout> </template>
拖拽方法
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里面使用记得将方法在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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。