vue實現(xiàn)拖動調(diào)整左右兩側容器大小

更新時間：2022年03月22日 09:13:37 作者：HerayChen

這篇文章主要為大家詳細介紹了vue實現(xiàn)拖動調(diào)整左右兩側容器大小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)拖動調(diào)整左右兩側容器大小的具體代碼，供大家參考，具體內(nèi)容如下

頁面布局

<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() {
? ? // 獲取 左邊區(qū)域 的 寬度
? ? let left = document.getElementById('left');
? ? // 獲取 移動區(qū)域 的 寬度
? ? let line = document.getElementById('line');
? ? // 獲取 右邊區(qū)域 的 寬度
? ? let right = document.getElementById('right');
? ? // 移動區(qū)域鼠標移入事件
? ? line.onmousedown = function(e) {
? ? ? ? // 移動的距離
? ? ? ? let lineLeft = e.clientX;
? ? ? ? document.onmousemove = function(e) {
? ? ? ? ? ? // 移動的位置 （側邊欄的寬度 + 移動的寬度）
? ? ? ? ? ? let diffVal = 276 + (e.clientX -lineLeft);
? ? ? ? ? ? // 移動區(qū)間的范圍 [276, 740]
? ? ? ? ? ? if(diffVal >= 276 && diffVal <= 840) {
? ? ? ? ? ? ? ? // 移動區(qū)域距離左邊的距離
? ? ? ? ? ? ? ? line.style.left = diffVal+'px';
? ? ? ? ? ? ? ? // 左邊縮放的寬度
? ? ? ? ? ? ? ? left.style.width = diffVal +'px';
? ? ? ? ? ? ? ? // 右邊改變后的寬度 （改變后的寬度要加上移動區(qū)域的寬度）
? ? ? ? ? ? ? ? right.style.width = document.getElementById('product').clientWidth - (diffVal + 16) +'px';
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? document.onmouseup = function() {
? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? document.onmouseup = null;
? ? ? ? }
? ? }
}

在vue里面使用記得將方法在mounted中調(diào)用一下：

樣式

.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;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: