vue左右布局容器拖动调整宽度

const boxRef = ref<any>(null)
const width = ref<any>(260)
const height = ref<any>(400)
let startX = 0
let startY = 0
let startWidth = 0
let startHeight = 0
// 初始化拖动操作的函数
function initDrag(side, event) {
  // 记录初始鼠标位置
  startX = event.clientX
  startY = event.clientY
  // 获取目标元素的初始宽度和高度
  startWidth = boxRef.value ? boxRef.value.offsetWidth : 0
  startHeight = boxRef.value ? boxRef.value.offsetHeight : 0
  // 拖动时执行的函数
  const doDrag = (e: any) => {
    // 计算鼠标移动的距离
    const dx = e.clientX - startX
    const dy = e.clientY - startY
    // 根据拖动的方向调整元素的尺寸
    if (side === 'right') {
      // 向右拖动时，增加宽度
      width.value = startWidth + dx
    }
    if (side === 'bottom') {
      // 向下拖动时，增加高度
      height.value = startHeight + dy
    }
  }
  // 结束拖动时执行的函数
  const stopDrag = () => {
    // 移除鼠标移动和鼠标释放时的事件监听
    document.removeEventListener('mousemove', doDrag)
    document.removeEventListener('mouseup', stopDrag)
  }
  // 添加事件监听器，用于响应鼠标移动和鼠标释放事件
  document.addEventListener('mousemove', doDrag)
  document.addEventListener('mouseup', stopDrag)
}

<style scoped>
.scrollbarClass {
  height: calc(100vh - 46px);
}
.content {
  display: flex;
  height: calc(100vh - 46px);
  width: 100%;
}
.rightBox {
  flex: 1;
  background-color: rgb(255, 255, 255);
  height: calc(100vh - 46px);
}

.draggable-box {
  position: relative;
  width: v-bind(width + 'px');
  font-size: 12px;
  background-color: #fff;
}
.resize-handle {
  position: absolute;
  background: #ccc;
}
.resize-handle:hover {
  background-color: #000; /* 当鼠标悬停时改变背景颜色 */
}
.resize-handle.right {
  top: 0;
  bottom: 0;
  width: 2px;
  cursor: ew-resize;
}
.resize-handle.right {
  right: 0;
}
</style>