项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

Splitter 分隔面板 ​

可拖拽的分栏容器:子面板 SplitterPanel 自渲染拖拽条,尺寸在 min/max 之间夹角互不越界,支持面板折叠与受控尺寸。

基础分栏 ​

横向分栏(左右),拖中间的拖拽条调整比例:

导航区 30%
内容区(自动分摊)
详情区(10%–40%)

纵向分栏与折叠 ​

layout 取 vertical 上下分栏;collapsible 面板在拖拽条上出现折叠钮,点击把面板尺寸折叠进相邻面板:

编辑区(可折叠)
预览区

受控尺寸与 resize 事件 ​

面板传 size 即受控,外部改值后重新分摊;resize 在拖拽、折叠及初始化后回传各面板占比(如 30.00% 的字符串数组):

各面板占比:—
导航区(受控)
内容区(自动分摊)

嵌套分栏 ​

Splitter 可嵌套使用(内层给满高度),组合出经典的三栏工作台布局:

目录
编辑器(纵向嵌套)
终端输出
属性面板

Splitter Props

参数说明类型默认值
layout分栏方向horizontal | verticalhorizontal

Splitter Events

参数说明类型默认值
resize拖拽、折叠或初始化后回传各面板尺寸占比(如 30.00%)的字符串数组(sizes: string[]) => void—

SplitterPanel Props

参数说明类型默认值
defaultSize初始尺寸(数字按 px,百分比传字符串),未设置时自动分摊number | string—
size受控尺寸(v-sync 场景)number | string—
min / max尺寸下限 / 上限number | string—
resizable是否可拖拽booleantrue
collapsible显示折叠钮;对象形态可配置折叠方向boolean | objectfalse