SuperAPI AI 工具集

el-splitter

通用与其它

查看项目

更新于 10-16 06:20

技能介绍

el-splitter 是一个分割面板组件,用于把界面区域按水平或垂直方向划分,并通过拖拽调整各面板大小。它适合分栏视图、可调整大小的面板、可折叠布局以及多窗格界面等场景。

使用时以 <el-splitter> 作为容器,内部放置 <el-splitter-panel> 作为各面板。默认横向布局,设置 layout="vertical" 可切换为垂直布局。面板支持 collapsible 属性实现折叠,使用 min 与 max 约束面板尺寸范围,使用 :resizable="false" 禁止拖拽调整,通过 v-model:size 跟踪面板尺寸。组件还提供 lazy 属性启用懒加载模式,适合包含大量内容时优化性能。

Splitter 的属性包括 layout(布局方向,可选 horizontal 或 vertical,默认 horizontal)与 lazy(布尔值,默认 false)。事件包括 resize-start、resize、resize-end 以及 collapse。SplitterPanel 的属性包括 size(支持 v-model:size,类型为 string 或 number)、min、max、resizable(布尔值,默认 true)与 collapsible(布尔值,默认 false),事件为 update:size,插槽包括 default、start-collapsible 与 end-collapsible。

建议使用 min/max 约束面板尺寸,用 collapsible 实现可折叠面板,在内容较重时使用 lazy 优化性能。具体安装方式、版本要求与完整 API 细节暂未提供。