使用分隔面板可将区域水平或垂直分隔，并可自由拖动以调整各个区域的大小。
属性
为了更好的与 Element Plus 做比较，Ant Design 中的回调方法放到事件里说明。
Splitter
| Antd | Element | 说明 |
|---|---|---|
| layout | layout | 布局方向 |
| lazy | — | 延迟渲染模式 |
Panel
| Antd | Element | 说明 |
|---|---|---|
| defaultSize | size | 初始面板大小，支持数字 px 或者文字 ‘百分比%’ 类型 |
| min | min | 最小阈值，支持数字 px 或者文字 ‘百分比%’ 类型 |
| max | max | 最大阈值，支持数字 px 或者文字 ‘百分比%’ 类型 |
| size | v-model:size | 受控面板大小，支持数字 px 或者文字 ‘百分比%’ 类型 |
| collapsible | collapsible | 快速折叠 |
| resizable | resizable | 是否开启拖拽伸缩 |
事件
Splitter
| Antd | Element | 说明 |
|---|---|---|
| onResizeStart | resize-start | 开始拖拽之前回调 |
| onResize | resize | 面板大小变化回调 |
| onResizeEnd | resize-end | 拖拽结束回调 |
Panel
| Element | 说明 |
|---|---|
| update:size | 当面板大小改变时触发 |
小结
两个框架的分隔面板组件功能非常相似，在 Ant Design 中有 lazy 的属性，而 Element Plus 中还没有。这个组件是较新的组件，应该也是为了满足阿里中后台的需求应运而生的。
参考链接：
发表回复