Splitter 分隔面板 ​

可将区域水平或垂直分隔，并可自由拖动以调整各个区域的大小。

基础用法 ​

最基本的用法，如果未传入默认尺寸，将自动平均分配。

1
2

垂直布局 ​

使用垂直方向。

1
2

可折叠 ​

配置 collapsible 可提供快速收缩功能。你可以使用 min 属性来防止折叠后通过拖拽进行扩展。

1
2
3
4
5

禁用拖动 ​

当任一面板禁用 resizable 时，拖拽功能将被禁用。

1
drag disable
3

面板大小 ​

v-model:size 可以获取面板的大小。

1
400px

延迟 1.2.1 ​

当启用 lazy 时，面板大小将不会在拖动时实时更新，只能在拖动结束后更新。

1
2
3

Splitter API ​

Splitter Attributes ​

属性名说明类型默认值
layout分隔面板的布局方向enumhorizontal
lazy 1.2.1是否使用懒加载booleanfalse

Splitter Events ​

事件名说明类型
resize-start开始调整面板大小时触发，index 是拖动条的索引Function
resize调整面板大小时触发，index 是拖动条的索引Function
resize-end面板调整大小时结束触发，index 是拖动条的索引Function
collapse 1.2.1当面板折叠时触发，index 是拖动条的索引Function

SplitterPanel API ​

SplitterPanel Attributes ​

属性名说明类型默认值
size / v-model:size面板大小（像素或百分比）string / number-
min面板最小尺寸（像素或百分比）string / number-
max面板的最大尺寸（像素或百分比）string / number-
resizable是否可以调整面板大小booleantrue
collapsible面板是否可折叠booleanfalse
title折叠按钮标题string-

SplitterPanel Events ​

事件名说明类型
update:size当面板大小改变时触发Function

SplitterPanel Slots ​

名称说明
default面板的默认内容
start-collapsible自定义起始折叠按钮的内容
end-collapsible结束可折叠按钮的自定义内容

SplitterPanel Exposes ​

方法名说明类型
splitterPanelRef 1.2.1SplitterPanel html 元素object

Copyright 2025 Winning Health 版权所有