Splitter 分隔面板

xy-splitter 用来组织左右分栏、上下日志区、筛选栏加结果区这类需要连续调宽调高的页面骨架。它由 xy-splitter 和 xy-splitter-panel 两个组件组成。

基础用法

最常见的场景是左侧导航或筛选区，右侧承载主列表和详情摘要。

Explorer

Outline

propsemitstemplate

1<template>

2 <xy-splitter>

3 <xy-splitter-panel>

4 <aside>Sidebar</aside>

5 </xy-splitter-panel>

6 <xy-splitter-panel>

7 <main>Content</main>

8 </xy-splitter-panel>

9 </xy-splitter>

10</template>

纵向布局

把 layout 改成 vertical 后，就可以搭建上下分区的监控台、终端或预览器。

Terminal — pnpm build

✓

Build production bundle2.4s

◐

Run type checking...

○

Execute unit tests-

[10:42:18] Starting build process...

[10:42:20] Compiled successfully in 2.4s

[10:42:21] Running type checker...

[10:42:23] Found 2 minor warnings

折叠与延迟提交

xy-splitter-panel 支持 v-model:size 同步当前像素尺寸，配合 collapsible 和 lazy 可以做更接近桌面应用的交互。

InspectorSidebar: 280px

Filters

StatusActive

PriorityHigh

AssigneeMe

Drag the divider or double-click to collapse

Results3 items

DEV-1024Improve splitter drag feedback

In Progress

DEV-1027Add lazy resize mode

Review

DEV-1031Fix panel collapse animation

Done

API

Splitter Attributes

属性	说明	类型	默认值
layout	面板排列方向	SplitterLayout	'horizontal'
lazy	是否在拖拽结束后再提交最终尺寸	boolean	false

Splitter Events

事件	说明	参数
resize-start	开始拖拽时触发	SplitterResizeHandler
resize	拖拽过程中触发	SplitterResizeHandler
resize-end	拖拽结束后触发	SplitterResizeHandler
collapse	折叠或恢复面板时触发	SplitterCollapseHandler

SplitterPanel Attributes

属性	说明	类型	默认值
size	初始尺寸或受控尺寸，支持数字、px、百分比	SplitterSize	—
min	最小尺寸，支持数字、px、百分比	SplitterSize	0
max	最大尺寸，支持数字、px、百分比	SplitterSize	—
resizable	是否允许通过分隔条调整尺寸	boolean	true
collapsible	是否允许通过分隔条快捷折叠当前面板	boolean	false

SplitterPanel Events

事件	说明	参数
update:size	当前面板尺寸变化时触发	SplitterPanelSizeChangeHandler

Splitter Slots

插槽	说明
default	放置若干 xy-splitter-panel

SplitterPanel Slots

插槽	说明
default	面板内容区