vue2实现左右布局宽度可拖拽

<template>
  <div id="app">
    <div class="container">
      <div class="left" :style="{ width: leftWidth + 'px' }">

        <el-tree class="tree" :data="treeData" :props="defaultProps" node-key="id">
        </el-tree>
      </div>
      <div class="divider-h" @mousedown="startDragH">
        <span>||</span>
      </div>
      <div class="right" :style="{ width: rightWidth + 'px' }">
        <div class="top" :style="{ height: topHeight + 'px' }">
          <p>这是右边上面的区域</p>
        </div>
        <div class="divider-v" @mousedown="startDragV">
        </div>
        <div class="bottom" :style="{ height: bottomHeight + 'px' }">
          <p>这是右边下面的区域</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      containerWidth: 800, // 容器的宽度
      containerHeight: 600, // 容器的高度
      leftWidth: 400, // 左边区域的宽度
      rightWidth: 400, // 右边区域的宽度
      topHeight: 300, // 右边上面区域的高度
      bottomHeight: 300, // 右边下面区域的高度
      draggingH: false, // 是否正在水平拖动
      draggingV: false, // 是否正在垂直拖动
      startX: 0, // 水平拖动开始时的鼠标位置
      startY: 0, // 垂直拖动开始时的鼠标位置
      startLeftWidth: 0, // 水平拖动开始时的左边区域宽度
      startRightWidth: 0,
      startTopHeight: 0, // 垂直拖动开始时的右边上面区域高度
      startBottomHeight: 0,
      treeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

  methods: {
    // 开始水平拖动
    startDragH(e) {
      this.draggingH = true;
      this.startX = e.clientX;
      this.startLeftWidth = this.leftWidth;
      this.startRightWidth = this.rightWidth;
    },
    // 开始垂直拖动
    startDragV(e) {
      this.draggingV = true;
      this.startY = e.clientY;
      this.startTopHeight = this.topHeight;
      this.startBottomHeight = this.bottomHeight;
    },
    // 拖动中
    onDrag(e) {
      if (this.draggingH) {
        // 计算水平拖动的距离
        let delta = e.clientX - this.startX;
        // 更新左右区域的宽度
        this.leftWidth = this.startLeftWidth + delta;
        this.rightWidth = this.startRightWidth - delta;
      }
      if (this.draggingV) {
        // 计算垂直拖动的距离
        let delta = e.clientY - this.startY;
        // 更新上下区域的高度
        this.topHeight = this.startTopHeight + delta;
        this.bottomHeight = this.startBottomHeight - delta;
      }
    },
    // 结束拖动
    endDrag() {
      this.draggingH = false;
      this.draggingV = false;
    },
    onresize() {
      this.leftWidth = window.innerWidth * 0.3 - 5
      this.rightWidth = window.innerWidth * 0.7 - 5
      this.topHeight = window.innerHeight * 0.5 - 5
      this.bottomHeight = window.innerHeight * 0.5 - 5
      console.log(window.screen);
    }
  },
  mounted() {

    // 监听鼠标移动和松开事件
    document.addEventListener("mousemove", this.onDrag);
    document.addEventListener("mouseup", this.endDrag);
    window.addEventListener("resize", this.onresize);
    this.leftWidth = window.innerWidth * 0.2 - 5
    this.rightWidth = window.innerWidth * 0.8 - 5
    this.topHeight = window.innerHeight * 0.5 - 5
    this.bottomHeight = window.innerHeight * 0.5 - 5
    // 
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener("mousemove", this.onDrag);
    document.removeEventListener("mouseup", this.endDrag);
  },
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  /* border: 1px solid black; */
}

.left {
  display: flex;
  flex-direction: column;
  background-color: lightblue;
  height: 100%;
  width: 30%;
}

.right {
  display: flex;
  flex-direction: column;
  background-color: lightgreen;
  height: 100%;
  width: 70%;

}

.top {
  background-color: blueviolet;
}

.bottom {
  background-color: bisque;
}

.divider-h {
  width: 10px;
  cursor: col-resize;
}

.divider-h span {
  display: block;
  margin-top: 290px;
}

.divider-v {
  height: 10px;
  cursor: row-resize;
  background-color: aliceblue;
}

.divider-v span {
  display: block;
  margin-left: 190px;
}

.tree {
  flex: 1;
  overflow: auto;
  cursor: pointer;
}</style>