2.14.0

Splitter 分割器 beta ​

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

基础用法 ​

最基础用法，如果没有传递默认大小，它将自动等分。

1
2

垂直布局 ​

使用垂直布局。

1
2

可收起 ​

通过配置 collapsible 提供快速收缩能力。你可以使用 min 属性来防止折叠后通过拖动展开。

开启
1
2
3
4
5

禁用拖拽 ​

当其中任意面板禁用了 resizable 时，将禁用拖拽。

禁用
1
禁用拖拽
3

面板大小 ​

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

1
100px
3

延迟更新 2.11.0 ​

开启 lazy 时，面板大小在拖拽过程中不会实时更新，而是在拖拽结束后才更新。

1
2
3

Splitter API ​

Splitter 属性 ​

名称描述类型默认值
layout分割器的布局方向枚举horizontal
lazy 2.11.0是否开启延迟更新模式booleanfalse

Splitter 事件 ​

名称描述type
resize-start开始调整面板大小时触发，index 是拖动条的索引Function
调整大小调整面板大小时触发，index 是拖动条的索引Function
resize-end面板调整大小结束时触发，index 是拖动条的索引Function
collapse 2.10.3面板折叠时触发，index 是拖动条的索引Function

SplitterPanel API ​

SplitterPanel 属性 ​

名称描述类型默认值
size / v-model:size面板的大小（像素或百分比）string / number-
min面板的最小尺寸（像素或百分比）string / number-
max面板的最大尺寸（像素或百分比）string / number-
resizable面板是否可以调整大小booleantrue
collapsible面板是否可以收起booleanfalse

SplitterPanel 事件 ​

名称描述type
update:size面板大小改变时触发Function

SplitterPanel 插槽 ​

名称描述
default面板的默认内容
start-collapsible自定义起始端收起按钮的内容
end-collapsible自定义末尾端收起按钮的内容

SplitterPanel 暴露的方法 ​

名称描述类型
splitterPanelRef 2.11.9SplitterPanel HTML 元素object

来源 ​

组件 • 样式 • 文档

贡献者 ​