0.0.4

分割面板 beta ​

水平或垂直划分区域，并可通过拖拽调整各区域大小。

基础用法 ​

不传默认尺寸时会将空间均分。

1
2

纵向 ​

使用纵向布局。

1
2

可折叠 ​

配置 collapsible 可快速收起区域；配合 min 可在折叠后限制再次拖拽展开的行为。

enable
1
2
3
4
5

禁止拖拽 ​

任一面板将 resizable 设为 false 后，将无法通过拖拽调整尺寸。

disable
1
drag disable
3

面板尺寸 ​

可通过 v-model:size 读取或控制面板尺寸。

1
100px
3

懒更新 ​

开启 lazy 后，拖拽过程中不会实时更新面板尺寸，仅在拖拽结束时更新。

1
2
3

分割面板 API ​

分割面板 属性 ​

名称说明类型默认值
layout分割方向enumhorizontal
lazy是否懒更新尺寸booleanfalse

分割面板 事件 ​

事件名说明类型
resize-start开始调整某块面板尺寸时触发，index 为分割线索引Function
resize调整过程中触发，index 为分割线索引Function
resize-end调整结束时触发，index 为分割线索引Function
collapse面板折叠时触发，index 为分割线索引Function

子面板 API ​

子面板 属性 ​

名称说明类型默认值
size / v-model:size面板尺寸（像素或百分比）string / number-
min最小尺寸（像素或百分比）string / number-
max最大尺寸（像素或百分比）string / number-
resizable是否允许拖拽调整大小booleantrue
collapsible是否可折叠booleanfalse

子面板 事件 ​

事件名说明类型
update:size面板尺寸变化时触发Function

子面板 插槽 ​

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

子面板 方法 ​

名称说明类型
splitterPanelRef子面板根 DOM 引用object