仅桌面端保证样式
Splitter 分隔面板
可拖拽的分栏容器:子面板 SplitterPanel 自渲染拖拽条,尺寸在 min/max 之间夹角互不越界,支持面板折叠与受控尺寸。
基础分栏
横向分栏(左右),拖中间的拖拽条调整比例:
纵向分栏与折叠
layout 取 vertical 上下分栏;collapsible 面板在拖拽条上出现折叠钮,点击把面板尺寸折叠进相邻面板:
受控尺寸与 resize 事件
面板传 size 即受控,外部改值后重新分摊;resize 在拖拽、折叠及初始化后回传各面板占比(如 30.00% 的字符串数组):
各面板占比:—
嵌套分栏
Splitter 可嵌套使用(内层给满高度),组合出经典的三栏工作台布局:
Splitter Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| layout | 分栏方向 | horizontal | vertical | horizontal |
Splitter Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| resize | 拖拽、折叠或初始化后回传各面板尺寸占比(如 30.00%)的字符串数组 | (sizes: string[]) => void | — |
SplitterPanel Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultSize | 初始尺寸(数字按 px,百分比传字符串),未设置时自动分摊 | number | string | — |
| size | 受控尺寸(v-sync 场景) | number | string | — |
| min / max | 尺寸下限 / 上限 | number | string | — |
| resizable | 是否可拖拽 | boolean | true |
| collapsible | 显示折叠钮;对象形态可配置折叠方向 | boolean | object | false |