Splitter 分隔面板
通过拖拽分隔条调整两个或多个面板的相对尺寸。常用于"代码编辑器布局"、"文件浏览器"、"双栏对比"。
何时使用
- 需要让用户在多个区域间动态分配空间。
- IDE / 数据浏览器 / Diff 视图等。
基本使用
水平布局，左右两栏可拖动调整。
垂直布局
layout="vertical" 切换成上下分隔。
多面板
放多个 <c-splitter-panel> 即可形成"三栏布局"，每两栏之间一条分隔条。
限制最小 / 最大尺寸
每个面板可独立设置 min / max，防止被拖到不可用尺寸。
不可拖动
设置 :resizable="false" 让面板交界处不出现拖拽条（可用作单纯的 flex 布局容器）。
监听尺寸变化
resize / resizeStart / resizeEnd 都返回当前各面板像素尺寸数组。
API
Splitter Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| layout | 'horizontal' | 'vertical' | 'horizontal' | 布局方向 |
| orientation | 'horizontal' | 'vertical' | - | layout 的别名；显式 layout 优先 |
Splitter Events
| 事件名 | 回调签名 | 触发时机 |
|---|---|---|
| resize | (sizes: number[]) | 拖拽过程中持续触发 |
| resizeStart | (sizes: number[]) | 开始拖拽 |
| resizeEnd | (sizes: number[]) | 结束拖拽 |
SplitterPanel Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | number | string | — | 由外部状态接管的尺寸 |
| defaultSize | number | string | — | 初始尺寸（不接管时生效） |
| min | number | string | 0 | 最小尺寸 |
| max | number | string | — | 最大尺寸 |
| resizable | boolean | true | 是否在该面板右 / 下侧画拖拽条 |
| collapsible | boolean | { start?: boolean; end?: boolean } | false | 是否允许折叠；对象形态分别声明两端 |
| showCollapsibleIcon | boolean | false | 是否在 resizer 上渲染折叠 / 展开按钮（需配合 collapsible） |