鼠标点击实现拖拽纵向边框改变元素宽度

类似表格纵向边框拖拽：

 话不多说，上代码！

<div class="menuWrap" class="menu-wrap">
    <div>我是菜单</div>
    <div ref="menuBorder" class="menu-border"></div>
</div>
<div class="right-content">
    这里是右边内容
</div>

上面是基本布局，menu-border 是中间分割线，用于拖拽的，样式我就不多敲了。

然后下面讲解js逻辑，页面一加载，我们初始化一下鼠标监听事件：

activated ：{
    let menuBorder = this.$refs.menuBorder; //拿到上面的分割线元素
    menuBorder.addEventListener('mousedown', (e) => { //在鼠标点击元素的时候添加一个移动事件
        document.addEventListener('mousemove', this.borderMove)
    })
    document.addEventListener('mouseup', (e) => { //鼠标松开的时候取消移动事件
        document.removeEventListener('mousemove', this.borderMove)
    })
},

methods : {
            /**
             * 拖拽计算宽度
             * */
            borderMove (e) {
                let menuWrap = this.$refs.menuWrap; //获取到左边菜单包裹元素
                 //拿到菜单距离屏幕左边的距离
                let left = menuWrap.getBoundingClientRect().left;
                //e.clientX 鼠标距离屏幕左边的坐标距离
                if (e.clientX - left > 400) {
                    menuWrap.style.width = '400px'
                } else if (e.clientX - left < 150) {
                    menuWrap.style.width = '150px'
                } else {
                    menuWrap.style.width = e.clientX - left + 'px'
                }
            }
}

完成以上代码就是可以实现拖拽改变元素宽度了！