vue2 div拉伸

1. 效果图
2.  代码

   <template>
       <div class="container">
           <div class="topBox">top</div>
           <div class="resize">⋯</div>
           <div class="bottomCon">
               <div class="leftBox">left</div>
               <div class="move">⋮</div>
               <div class="rightBox">right</div>
           </div>
       </div>
   </template>
   
   <script>
   
   export default {
       mounted(){
           this.dragUD();
           this.dragLR();
       },
       methods: {
           dragUD(){//上下
               let resize = document.getElementsByClassName('resize');
               let topBox = document.getElementsByClassName('topBox');
               let bottomCon = document.getElementsByClassName('bottomCon');
               let container = document.getElementsByClassName('container');
               console.log(resize)
               for( let i=0; i<resize.length; i++){
                   resize[i].onmousedown = function(e){
                       console.log(e);
                       resize[i].style.background = '#818181';
                       let startY = e.clientY;
                       resize[i].top = resize[i].offsetTop;
                       document.onmousemove = function(e){
                           let endY = e.clientY;
                           let moveLen = resize[i].top + (endY-startY); // endY-startY=移动距离 resize[i].top+移动的距离=上边区域最后的高度
                           let bottomLen = container[i].clientHeight - resize[i].offsetHeight; // 容器高度 - 上边区域的高度 = 下边区域的高度
                           if (moveLen < 50) moveLen = 50 // 上边区域的最小高度为50px
                           if (moveLen > bottomLen - 150) moveLen = bottomLen - 150 //下边区域最小高度为150px
   
                           resize[i].style.top = moveLen// 设置上边区域的高度
   
                           for (let j = 0; j < topBox.length; j++) {
                               topBox[j].style.height = moveLen + 'px';
                               bottomCon[j].style.height = container[i].clientHeight - moveLen - 10 + 'px';
                           }
                           // 鼠标松开事件
   						document.onmouseup = function () {
   							//颜色恢复
   							resize[i].style.background = '#d6d6d6'
   							document.onmousemove = null
   							document.onmouseup = null
   							resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
   						}
   						resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
   						return false
                       }
                   }
               }
           },
           dragLR(){//左右
               let bottomCon = document.getElementsByClassName('container');
               let leftBox = document.getElementsByClassName('leftBox');
               let move = document.getElementsByClassName('move');
               let rightBox = document.getElementsByClassName('rightBox');
   
               for( let i=0; i< move.length; i++){
                   move[i].onmousedown = function(e) {
                       console.log(e);
                       move[i].style.background = '#818181'
                       let startX = e.clientX;
                       move[i].left = move[i].offsetLeft;
                       //鼠标拖动
                       document.onmousemove = function(e) {
                           let endX = e.clientX;
                           let moveLen = move[i].left + (endX - startX);
                           let rightLen = bottomCon[i].clientWidth - move[i].offsetWidth;
   
                           if (moveLen < 50) moveLen = 50 // 左边区域的最小宽度为50px
                           if (moveLen > rightLen - 150) rightLen = rightLen - 150 //右边区域最小宽度为150px
   
                           move[i].style.left = moveLen;
   
                           for (let j = 0; j < leftBox.length; j++) {
                               leftBox[j].style.width = moveLen + 'px'
                               rightBox[j].style.width = bottomCon[i].clientWidth - moveLen - 10 + 'px'
                           }
   
                           document.onmouseup = function() {
   							//颜色恢复
   							move[i].style.background = '#d6d6d6'
   							document.onmousemove = null
   							document.onmouseup = null
   							move[i].releaseCapture && move[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
   						}
   						move[i].setCapture && move[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
   						return false
                       }
                   }
               }
           }
       }
   }
   
   </script>
   
   <style>
   html{
       height: 100%;
       width: 100%;
   }
   body{
       height: 100%;
       width: 100%;
   }
   .container {
       height: 100%;
       width: 100%;
   }
   
   .topBox {
       background-color: aqua;
       height: 38%;
   }
   .bottomCon{
       height: 62%;
       width: 100%;
       display: flex;
   }
   .leftBox {
       background-color: bisque;
       width: 38%;
       height: 100%;
   }
   
   .rightBox {
       background-color: burlywood;
       width: 62%;
       height: 100%;
   }
   
   /* 拖拽区div样式 */
   .move {
       cursor: w-resize;
       float: left;
       position: relative;
       top: 45%;
       background-color: #d6d6d6;
       border-radius: 5px;
       margin-top: -10px;
       width: 10px;
       height: 50px;
       background-size: cover;
       background-position: center;
       font-size: 32px;
       color: white;
   }
   
   /*拖拽区鼠标悬停样式*/
   .move:hover {
       color: #444444;
   }
   
   /* 拖拽区div样式 */
   .resize {
       cursor: s-resize;
       width: 50px;
       height: 10px;
       background-color: #d6d6d6;
       margin: 0 auto;
       border-radius: 5px;
       text-align: center;
       line-height: 3px;
       font-size: 32px;
       color: white;
   }
   
   /*拖拽区鼠标悬停样式*/
   .resize:hover {
       color: #444444;
   }
   </style>