vue添加一个可拉伸边框的线条

1	`<div` `id="middle" ref="middle" @mousedown="dragMousedown"></div>`

#middle{
  width: 5px;
  height: 100%;
  background-color: #d6d6d6;
  margin-top: -40px;
  position: absolute;
  left: 357px;
}
#middle:hover{
  cursor: col-resize;
}

    dragMousedown (e) {
      const middle = this.$refs.middle
      const myInfo = this.$refs.myInfo.$el
        //颜色改变提醒
        middle.style.background = '#818181';
        const startX = e.clientX;
        middle.left = middle.offsetLeft;
        // 鼠标拖动事件
        document.onmousemove = (e) => {
            const endX = e.clientX;
            let moveLen = middle.left + (endX - startX); 
 
            if (moveLen <= 350) moveLen = 350; 
            if (moveLen > 1350) moveLen = 1350; 
            middle.style.left = moveLen + 7 + "px"; 
            myInfo.style.width = moveLen + "px";
        };
        // 鼠标松开事件
        document.onmouseup = () => {
            //颜色恢复
            middle.style.background = '#d6d6d6';
            document.onmousemove = null;
            document.onmouseup = null;
            middle.releaseCapture && middle.releaseCapture();
        };
        middle.setCapture && middle.setCapture();
        return false;
    },