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) {      // 移动的位置 （侧边栏的宽度 + 移动的宽度）      lbqYMqReogZet 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;}

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