<template>
? ? <a-layout class="width-auto" id="product">
? ? ? ? <div class="content">
? ? ? ? ? ? <div id="left" class="left">
? ? ? ? ? ? 左側(cè)
? ? ? ? ? ? </div>
? ? ? ? ? ? <div id="line" class="resize-line"></div>
? ? ? ? ? ? <div id="right" class="right">
? ? ? ? ? ? 右側(cè)
? ? ? ? ? ? </div>
? ? ? ? </div>
? ?</a-layout> ? ? ? ??
?</template> 

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

.content {
? ? display: flex;
? ? width: 100%;
? ? height: 100%;
}
.left {
? ? width: 260px;
? ? height: 100%;
}
.resize-line {
? ? /*鼠標(biāo)移入顯示左右箭頭*/
? ? 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;
}