如何实现element-plus中的 el-container布局可拖动

通过增加横向拖动条与纵向拖动条实现  el-aside 与 el-header可拖动

<template>
  <div class="app-container home">
    <el-container id="dept" style="height: 100%;">
      <el-aside width="220px" id="drag-dept-left">
        内容*****我的
      </el-aside>
      <div id="dragBar-dept" class="vertical-dragbar"></div>
      <el-main>
        <el-container style="height: 100%;">
          <el-footer height="150px">
            footer 内容
          </el-footer>
          <div id="dragBar-dept2" class="level-dragbar"></div>
          <el-main>
            main 内容--
          </el-main>
          
        </el-container>
      </el-main>
 
    </el-container>

  </div>
</template>

<script setup name="Index">
  function setLayoutDrag(dragId) {
    const resize = document.getElementById(dragId);
    let previousElement = resize.previousSibling;
    let nextElement = resize.nextSibling;
    let previousTag = previousElement.tagName;
    let nextTag = nextElement.tagName;
  
      resize.onmousedown = e => {
        const startX = e.clientX;
        const startY = e.clientY;
        let type = '';
        if (previousTag === 'ASIDE' && nextTag === 'MAIN') {
          type = 'ASIDE-MAIN'
        } else if (previousTag === 'MAIN' && nextTag === 'ASIDE') {
          type = 'MAIN-ASIDE'
        } else if ((previousTag === 'HEADER' && nextTag === 'MAIN') || (previousTag === 'FOOTER' && nextTag === 'MAIN')) {
          type = 'HEADER-MAIN'
        } else if ((previousTag === 'MAIN' && nextTag === 'HEADER') || (previousTag === 'MAIN' && nextTag === 'FOOTER')) {
          type = 'MAIN-HEADER'
        }

      
        let initWidth = 0, initHeight = 0;
        if (type === 'ASIDE-MAIN') {
          initWidth = previousElement.clientWidth; // 初始位置 
        } else if (type === 'MAIN-ASIDE') {
          initWidth = nextElement.clientWidth; // 初始位置 
        } else if (type === 'HEADER-MAIN') {
          initHeight = previousElement.clientHeight;
        } else if(type === 'MAIN-HEADER') {
          initHeight = nextElement.clientHeight;
        }
       
        document.onmousemove = k => {
          const endX = k.clientX;
          const endY = k.clientY;
          let moveLen = endX - startX; // 横向移动宽度
          let moveHeight = endY -startY; // 纵向移动高度
          switch (type) {
            case 'ASIDE-MAIN':
              let asideMainWidth = initWidth + moveLen
              if (moveLen < 0) { // 向左移
                if (asideMainWidth > 90) { // 左侧剩90
                  previousElement.style.width =  asideMainWidth + 'px'
                }
              } else { // 向右移动
                if (nextElement.clientWidth > 90) { // 右侧剩90
                  previousElement.style.width =  asideMainWidth + 'px'
                }
                
              }
              break;
            case 'MAIN-ASIDE': 
              let mainAsideWidth = initWidth - moveLen;
              if (moveLen < 0) { // 向左移
                if (previousElement.clientWidth > 90) { // 左侧剩90
                  nextElement.style.width =  mainAsideWidth + 'px'
                }
              } else { // 向右移动
                if (mainAsideWidth > 90) {
                  nextElement.style.width =  mainAsideWidth + 'px'
                }
              }
              break;
            case 'HEADER-MAIN': {
              let headerMainHeight = initHeight + moveHeight
              if (moveHeight < 0) { // 向上移
                if (headerMainHeight > 60) { // 上侧剩90
                  previousElement.style.height =  headerMainHeight + 'px'
                }
              } else { // 向下移动
                if (nextElement.clientHeight > 60) { // 下侧剩90
                  previousElement.style.height =  headerMainHeight + 'px'
                }
                
              }
              break;
            }
            case 'MAIN-HEADER': {
              let mainHeaderHeight = initHeight - moveHeight;
              if (moveHeight < 0) { // 向上移
                if (previousElement.clientHeight > 60) { // 左侧剩90
                  nextElement.style.height =  mainHeaderHeight + 'px'
                }
              } else { // 向下移动
                if (mainHeaderHeight > 60) {
                  nextElement.style.height =  mainHeaderHeight + 'px'
                }
              }
              break;
            }
            
            default:
              
          }

        }
        document.onmouseup = evt => {
          document.onmousemove = null;
          document.onmouseup = null;
          resize.releaseCapture && resize.releaseCapture();
         
          
        }
        resize.setCapture && resize.setCapture();
        return false;
      }
  }
  onMounted(() => {
    setLayoutDrag('dragBar-dept');
    setLayoutDrag('dragBar-dept2');
  })

</script>

<style scoped lang="scss">
  .vertical-dragbar {
      width: 5px;
      height: 100%;
      background: rgb(238,238,238);
      cursor: e-resize;
  }
  .level-dragbar{
    height: 5px;
    width: 100%;
    background: rgb(238,238,238);
    cursor: n-resize;
  }

</style>