demo
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e0da33f2fb47a44dd6725003738a77ae.png)
代码
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/02ea9dab440c41936d4c7ccaea7a5356.png)
const leftBoxWidth = ref(200);
const leftResize = (e: MouseEvent) => {
document.onselectstart = function () {
return false;
};
const startX = e.clientX;
const startWidth = leftBoxWidth.value;
const mouseMove = (documentE: MouseEvent) => {
leftBoxWidth.value = startWidth + documentE.clientX - startX - 80;
};
const mouseUp = () => {
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
document.onselectstart = function () {
return true;
};
};
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
};
.drag-bar {
width: 10px;
cursor: col-resize;
z-index: 999;
&:hover {
background-color: $color;
}
}
.drag-bar {
position: absolute;
top: 0;
left: -5px;
height: 100%;
}