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

本文实例为大家分享了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;
}

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