实现div的拖动效果

最近做了一个拖动效果的需求，这边进行一个记录，感觉比找到的代码要简洁一些。框架是vue，稍微利用了一下flex的小技巧，这样就只需要更改一侧的宽度实现变化，进而可以简化，目前自己使用没有bug，如有问题欢迎指出。

下面是主要代码的实现，并不是全部代码。

HTML结构

<div class="main">
    <div class="mian-left"></div>
    <div class="resize" @mousedown="onMouseDown"></div>
    <div class="main-right"></div>
</div>

主要CSS

.main{
    display: flex;
}
.main-right{
    flex: 1;
}
.resize{
    width: 5px;
    cursor: col-resize;
}

js

onMouseDown(e){
    this.isResizing = true
    this.startX = e.clientX
    this.startLeftWidth = this.leftWidth
    document.addEventListener('mousemove',this.onMouseMove)
    document.addEventListener('mouseup',this.onMouseUp)
},
onMouseMove(e){
    if(!this.isResizing) return
    const deltaX = e.clientX - this.startX
    this.leftWidth = this.startLeftWidth +deltaX
    document.querySelector('.main-left').style.width = this.leftWidth + 'px'
}
onMouseUp(){
    this.isResizeing = false
    document.removeEventListener('mousemove',this.onMouseMove)
    document.removeEventListener('mouseup',this.onMouseUp)
}