Vuetify是否提供Quasar QSplitter组件的等效组件？

• Vuetify 官方原生组件库没有提供和Quasar QSplitter完全对等的开箱即用可拖拽分隔面板组件，不存在直接可以替换的内置组件。
• 实现垂直方向可拖拽分隔条的可选方案如下：
  • 基于Vuetify基础组件自行封装：依托Vuetify自带的布局组件（v-flex、v-container、v-row/v-col）搭配原生拖拽事件即可快速实现，核心逻辑为：给分隔条绑定鼠标/触屏按下事件，触发拖拽后监听光标垂直方向位移，实时计算并更新上下两个面板的高度占比，松开按键后移除事件监听即可。基础实现的核心代码结构参考：

<template>
  <div class="d-flex flex-column h-100">
    <!-- 上侧面板 -->
    <div :style="{ height: `${topHeight}%` }" class="overflow-auto pa-2">
      上方面板内容区
    </div>
    <!-- 垂直拖拽分隔条 -->
    <div
      class="py-2 cursor-row-resize bg-grey-lighten-3 hover:bg-grey-lighten-1"
      @mousedown="handleDragStart"
      @touchstart.prevent="handleDragStart"
    ></div>
    <!-- 下侧面板 -->
    <div class="flex-grow-1 overflow-auto pa-2">
      下方面板内容区
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
const topHeight = ref(50)
let isDragging = false
const handleDragStart = () => {
  isDragging = true
  document.addEventListener('mousemove', handleDragMove)
  document.addEventListener('mouseup', handleDragEnd)
  document.addEventListener('touchmove', handleDragMove)
  document.addEventListener('touchend', handleDragEnd)
}
const handleDragMove = (e) => {
  if (!isDragging) return
  // 此处补充垂直位移换算面板高度的逻辑即可
}
const handleDragEnd = () => {
  isDragging = false
  document.removeEventListener('mousemove', handleDragMove)
  document.removeEventListener('mouseup', handleDragEnd)
  document.removeEventListener('touchmove', handleDragMove)
  document.removeEventListener('touchend', handleDragEnd)
}
onBeforeUnmount(() => handleDragEnd())
</script>

• 引入适配Vuetify生态的第三方拆分面板组件：如果不想从零手写拖拽逻辑，可以选择和Vuetify主题、设计规范兼容的开源splitter类组件，传入垂直模式配置参数即可直接生成符合要求的可拖拽分隔条，无需额外做样式适配。

内容的提问来源于stack exchange，提问作者Nathan Wailes