话不多说，直接排版走起：

    1. <div class="outer" ref="outer">
    2.     <div class="left" @mousedown="chatDragging"></div>
    3.     <div class="bottom" @mousedown="chatRight"></div>
    4.         <div class="smart_dialog" ref="dialog">
    5.      </div>
    6. </div>

    样式：

    1. .outer{
    2.     position: absolute;
    3.     width: 400px;
    4.     height: 250px;
    5.     right: 35%;
    6.     top: 9%;
    7.     background: #fff;
    8.   }
    9.   .left {
    10.     width: 3px;
    11.     height: 100%;
    12.     background: red;
    13.     position: absolute;
    14.     left: 0;
    15.   }
    16.   .bottom {
    17.     width: 100%;
    18.     height: 3px;
    19.     background: red;
    20.     position: absolute;
    21.     bottom: 0;
    22.   }
    23.   .left:hover,.bottom:hover {
    24.     cursor: row-resize;
    25.   }

    代码逻辑：

    1. // 向左边拉动
    2. chatDragging (e) {
    3.   let dragger = this.$refs.outer
    4.   let leftWidth = dragger.offsetWidth
    5.   e.preventDefault()
    6.   let startX = e.clientX
    7.   document.onmousemove = function (e) {
    8.     e.preventDefault()
    9.     let endX = e.clientX
    10.     let changeWidth = endX - startX
    11.     if (changeWidth < dragger.offsetWidth * 0.7) {
    12.       dragger.style.width = leftWidth - changeWidth + 'px'
    13.     }
    14.   }
    15.   document.onmouseup = function(evt) {
    16.     document.onmousemove = null
    17.     document.onmouseup = null
    18.     dragger.releaseCapture && dragger.releaseCapture()
    19.   }
    20.   dragger.setCapture && dragger.setCapture()
    21.   return false
    22. },
    23.   // 向下边拉动
    24.   chatRight (e) {
    25.     let dragger = this.$refs.outer
    26.     let topHeight = dragger.offsetHeight
    27.     e.preventDefault()
    28.     let startY = e.clientY
    29.     document.onmousemove = function (e) {
    30.       e.preventDefault()
    31.       let endY = e.clientY
    32.       let changeHeight = endY - startY
    33.       console.log(dragger.offsetHeight)
    34.       if (changeHeight < dragger.offsetHeight * 0.7) {
    35.         dragger.style.height = topHeight + changeHeight + 'px'
    36.         if (dragger.offsetHeight < 200) {
    37.           dragger.style.height = 200 + 'px'
    38.         }
    39.       }
    40.     }
    41.     document.onmouseup = function(evt) {
    42.       document.onmousemove = null
    43.       document.onmouseup = null
    44.       dragger.releaseCapture && dragger.releaseCapture()
    45.     }
    46.     dragger.setCapture && dragger.setCapture()
    47.     return false
    48.   },

    最后的样式图：
    企业微信20200918-104044@2x.png