vue3怎么实现上下面板之间可拖动的分割条

要实现上下面板之间可拖动的分割条，可以使用 Vue3 中的指令 v-resize，该指令可以监听元素大小的变化，并且可以触发相应的回调函数。具体实现步骤如下：

1. 在上下两个面板之间添加一个分割条元素，例如一个 div。

2. 给分割条元素添加 v-resize 指令，并且绑定一个事件处理函数。

3. 在事件处理函数中，获取上下两个面板的元素对象，计算它们的高度，并且根据鼠标移动事件动态改变上下面板的高度。

示例代码如下：

<template>
  <div class="split-panel">
    <div class="top-panel" :style="{ height: topHeight + 'px' }">
      <!-- 上面板内容 -->
    </div>
    <div class="split-bar" v-resize="onResize"></div>
    <div class="bottom-panel" :style="{ height: bottomHeight + 'px' }">
      <!-- 下面板内容 -->
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const topHeight = ref(200); // 上面板高度
    const bottomHeight = ref(300); // 下面板高度

    // 分割条拖动事件处理函数
    const onResize = (width, height) => {
      // 计算上下面板的高度
      const totalHeight = height + topHeight.value + bottomHeight.value;
      const newTopHeight = height / totalHeight * 100;
      const newBottomHeight = (totalHeight - height) / totalHeight * 100;

      // 设置上下面板的高度
      topHeight.value = newTopHeight;
      bottomHeight.value = newBottomHeight;
    };

    return {
      topHeight,
      bottomHeight,
      onResize
    };
  }
};
</script>

<style>
.split-panel {
  position: relative;
  height: 100%;
}

.top-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

.split-bar {
  position: absolute;
  top: 200px; /* 上面板高度 */
  left: 0;
  right: 0;
  height: 10px;
  background-color: #ccc;
  cursor: row-resize;
}

.bottom-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
</style>

在上面的代码中，我们使用 ref 创建了两个响应式变量 topHeight 和 bottomHeight，它们分别表示上下面板的高度。在 onResize 函数中，我们根据分割条的高度动态计算出上下面板的高度，并且将它们设置为响应式变量的新值，从而实现面板高度的动态改变。最后，我们将 topHeight 和 bottomHeight 绑定到上下面板的 style 属性中，以实现面板高度的动态渲染。