用途:el-space 是 Element Plus 提供的间距组件,用于在多个子元素之间生成一致的间隔,帮助更好地控制布局,适合按钮组、表单布局、导航项以及需要统一组件间距的场景。
主要能力:支持水平与垂直排列;支持预设尺寸与自定义尺寸;支持自动换行以适配响应式布局;支持自定义分隔元素(spacer);支持填充容器使子项等宽。
用法要点:基础用法是在 <el-space> 内放置需要间距的元素,例如多个 el-button。通过 direction="vertical" 改为垂直排列;通过 size 设置间距,可取 small、default、large 或数值,也可传入数组;通过 :size="20" 自定义间距;添加 wrap 实现自动换行;通过 spacer="|" 设置分隔符;添加 fill 让子项填满容器,fill-ratio 控制填充比例。
属性:alignment(对齐方式,CSS align-items,默认 center)、direction(排列方向,'vertical' | 'horizontal',默认 horizontal)、spacer(分隔元素,string | number | VNode)、size(间距,'default' | 'small' | 'large' | number | [number, number],默认 'small')、wrap(自动换行,boolean,默认 false)、fill(填充容器,boolean,默认 false)、fill-ratio(填充比例,number,默认 100)。插槽:default,放置需要设置间距的项目。
最佳实践:响应式布局使用 wrap;自定义分隔使用 spacer;等宽项目使用 fill。
限制:资料未提供该技能的具体安装方式、收费信息或运行环境要求。