Splitter 分隔面板 beta
可将区域水平或垂直分隔，并可自由拖动以调整各个区域的大小。
基础用法
最基本的用法，如果未传入默认尺寸，将自动平均分配。
垂直布局
使用垂直方向。
可折叠
配置 collapsible 可提供快速收缩功能。 你可以使用 min 属性来防止折叠后通过拖拽进行扩展。
禁用拖动
当任一面板禁用 resizable 时，拖拽功能将被禁用。
面板大小
v-model:size 可以获取面板的大小。
Splitter API
Splitter Attributes
| 名称 | 详情 | 类型 | 默认 |
|---|---|---|---|
| layout | 分隔面板的布局方向 | enum | horizontal |
Splitter Events
| 名称 | 详情 | 类型 |
|---|---|---|
| resize-start | 开始调整面板大小时触发，index 是拖拽条的索引。 | Function |
| resize | 调整面板大小时触发，index 是拖拽条的索引。 | Function |
| resize-end | 面板调整大小结束时触发，index 是拖拽条的索引。 | Function |
SplitterPanel API
SplitterPanel Attributes
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size / v-model:size | 面板大小(像素或百分比) | string / number | - |
| min | 面板最小尺寸(像素或百分比) | string / number | - |
| max | 面板的最大尺寸(像素或百分比) | string / number | - |
| resizable | 是否可以调整面板大小 | boolean | true |
| collapsible | 面板是否可折叠 | boolean | false |
SplitterPanel Events
| 名称 | 详情 | 类型 |
|---|---|---|
| update:size | 当面板大小改变时触发 | Function |
SplitterPanel Slots
| 名称 | 详情 |
|---|---|
| default | 面板的默认内容 |
| start-collapsible | 自定义起始折叠按钮的内容 |
| end-collapsible | 结束可折叠按钮的自定义内容 |
源代码
贡献者
