分割面板 beta
将区域水平或垂直划分，并可自由拖动以调整每个区域的大小。
基础用法
最基础的用法，如果不传递默认尺寸，将会自动平均分割。
垂直
使用垂直方向。
可折叠
配置 collapsible 可以提供快速收缩能力。你可以使用 min 属性来防止折叠后通过拖动展开。
禁用拖动
当任一面板禁用 resizable 时，拖动将被禁用。
面板尺寸
v-model:size 可以获取面板尺寸。
懒加载 2.11.0
当启用 lazy 时，面板尺寸在拖动过程中不会实时更新，而是在拖动结束后才更新。
Splitter API
Splitter 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| layout | 分割面板的布局方向 | 枚举 | horizontal |
| lazy 2.11.0 | 是否启用懒加载模式 | boolean | false |
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 | 面板是否可以调整大小 | boolean | true |
| collapsible | 面板是否可以折叠 | boolean | false |
SplitterPanel 事件
| 名称 | 描述 | type |
|---|---|---|
| update:size | 当面板尺寸改变时触发 | Function |
SplitterPanel 插槽
| 名称 | 描述 |
|---|---|
| default | 面板的默认内容 |
| start-collapsible | 开始可折叠按钮的自定义内容 |
| end-collapsible | 结束可折叠按钮的自定义内容 |
SplitterPanel Exposes
| 名称 | 描述 | 类型 |
|---|---|---|
| splitterPanelRef 2.11.9 | splitter-panel HTML 元素 | object |
来源
贡献者
