结构与样式
代码语言：javascript复制<div class="leftCategory">
<div class="drag-line"></div>
</div>
.leftCategory {
position: relative;
width: 200px;
}
.drag-line{
position: absolute;
top:0;
right:0;
width: 6px;
height: 100vh;
z-index: 99;
cursor: e-resize;
}实现思路
当鼠标在拖动线（drag-line）区域内按下时，监听鼠标移动，获取鼠标移动的实时距离 将这个距离加上leftCategory本来的宽度，就是leftCategory随着鼠标移动的宽度
代码实现
代码语言：javascript复制// 获取元素在页面中的位置（X）
function getElementLeft(element) {
var actualLeft = element.offsetLeft; // 获取元素距离父元素的距离
var current = element.offsetParent; //这是获取父元素
while (current !== null) { //当它上面有元素时就继续执行
actualLeft = current.offsetLeft; //这是获取父元素距它的的父元素左上角的距离
current = current.offsetParent;
}
return actualLeft;
}
// 实现左侧分类树宽度自由改变
function treeAutoWidth(){
// 获取当前拖动线在body中的位置
let dragLinePositionX = 0
// 鼠标实际移动的距离
let mouseDistance = 0
let dragLine = document.querySelector('.drag-line')
let leftCategory = document.querySelector('.leftCategory')
dragLine.onmousedown=function(e){
document.onmousemove = function(e){
dragLinePositionX = getElementLeft(dragLine) dragLine.clientWidth
// 鼠标实际移动的距离 = 鼠标在body的位置减去 拖动线在body中的位置
mouseDistance = e.x - dragLinePositionX
dragLine.style.transform=`translateX(${mouseDistance}px)`
leftCategory.style.width=`${leftCategory.clientWidth mouseDistance}px`
}
document.onmouseup=function(){
document.onmouseup=null;
document.onmousemove=null;
};
}
}
export default treeAutoWidth
