vue3+vite实现左右DIV拖拽（优化版）

<template>
  <el-card body-style="height: calc(100vh - 162px)">
    <div class="metamodelBox">
      <div class="leftBox" :style="{width:`calc(${defaultLeftWidthRate}% - 2px)`}"></div>
      <div class="resize"/>
      <div class="rightBox" :style="{width:`calc(100% - ${defaultLeftWidthRate}% - 2px)`}"></div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";

onMounted(() => {
  dragDiv()
})

const defaultLeftWidthRate = ref(20)
const dragDiv = () => {
  let resize = document.getElementsByClassName('resize')
  let box = document.getElementsByClassName('metamodelBox')
  let left = document.getElementsByClassName('leftBox')
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e: any) {
      let boxWidth = box[i].offsetWidth
      let leftWidth = left[i].offsetWidth
      let minLeftWidthRate = parseFloat((100 / boxWidth * 100).toFixed(4))
      let minRightWidthRate = parseFloat((100 / boxWidth * 100).toFixed(4))
      // 开始位置
      let startX = e.clientX
      // 鼠标拖动事件
      document.onmousemove = function (e: any) {
        // 结束位置
        let endX = e.clientX
        // 得到鼠标拖动的宽高距离：取绝对值
        let distX = Math.abs(endX - startX)
        // 向右拖拽
        if (endX > startX) {
          let moveLate = parseFloat(((leftWidth + distX) / boxWidth * 100).toFixed(4));
          if ((parseFloat('100') - moveLate) > minRightWidthRate) {
            defaultLeftWidthRate.value = moveLate
          }
        }
        // 向左拖拽
        if (endX < startX) {
          let moveLate = parseFloat(((leftWidth - distX) / boxWidth * 100).toFixed(4));
          if (moveLate > minLeftWidthRate) {
            defaultLeftWidthRate.value = moveLate
          }
        }
      }
      // 鼠标松开事件
      document.onmouseup = function (e: any) {
        document.onmousemove = null
        document.onmouseup = null
        resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      }
      resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false
    }
  }
}

</script>

<style lang="scss">
.metamodelBox {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.metamodelBox .leftBox {
  position: relative;
  width: calc(20% - 2px);
  height: 100%;
  background-color: green;
}

.metamodelBox .resize {
  position: relative;
  width: 4px;
  height: 100%;
  color: gray;
  background: rgb(214, 214, 214);
  cursor: w-resize;
}

.metamodelBox .rightBox {
  position: relative;
  width: calc(80% - 2px);
  height: 100%;
  background-color: yellow;
}

</style>```