2.11.1

分割面板 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结束可折叠按钮的自定义内容

来源 ​

组件 • 样式 • 文档

贡献者 ​