vue3上下组件之间增加可拖动的分割条的代码示例

以下是一个简单的示例代码，展示了如何在Vue3上下组件之间增加可拖动的分割条：

<template>
  <div class="container">
    <div class="top" :style="{ height: topHeight + 'px' }">
      <slot name="top"></slot>
    </div>
    <div class="splitter" ref="splitter" @mousedown="startDrag"></div>
    <div class="bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topHeight: 200, // 初始上部分的高度
      isDragging: false, // 是否正在拖拽
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      const startY = event.pageY;
      const splitter = this.$refs.splitter;
      const container = splitter.parentNode;
      container.style.userSelect = 'none'; // 禁止选中文字
      container.style.cursor = 'ns-resize'; // 修改鼠标样式
      const onMouseMove = (event) => {
        const deltaY = event.pageY - startY;
        this.topHeight += deltaY;
      };
      const onMouseUp = () => {
        this.isDragging = false;
        container.style.userSelect = 'auto'; // 恢复选中文字
        container.style.cursor = 'auto'; // 恢复鼠标样式
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('mouseup', onMouseUp);
      };
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('mouseup', onMouseUp);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top,
.bottom {
  overflow: auto; /* 让内容超出部分可滚动 */
}

.splitter {
  height: 5px;
  background-color: #aaa;
  cursor: ns-resize;
}
</style>

在上述代码中，我们使用了一个`<div>`元素作为分割条，设置了它的高度和背景样式。当鼠标按下该元素时，我们在`window`对象上监听鼠标移动和鼠标抬起事件，计算出鼠标移动的距离并修改上部分的高度，从而实现了动态调整上下组件之间的分割线位置。