Space 间距

用于在组件之间提供统一的间距，避免重复使用 Divider 或手写 margin 样式。

import { createApp } from 'vue'
import { ElSpace } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSpace)

基础用法

通过 el-space 为多个子组件之间提供一致的水平间距，默认间距为 small (8px)。

垂直布局

通过 direction="vertical" 可切换为垂直排列，底层使用 flex-direction。

控制间距的大小

通过 size 属性使用内置尺寸 small / default / large，分别对应 8px、12px、16px。

自定义尺寸

size 也可以传入数字，对应像素值，可搭配 Slider 动态调整。

自动换行

在水平方向下，通过 wrap 属性开启自动换行，适合标签、按钮组等场景。

行间分隔符

通过 spacer 属性可以设置分隔符，支持字符串或 VNode，如 Divider 组件。

对齐方式

alignment 属性透传到 align-items，可用于调整不同高度的子元素对齐方式。

填充容器

fill 设置为 true 时，子元素会自动填满容器宽度。

API

Attributes

属性名	说明	类型	默认值
alignment	对齐方式	align-items 枚举	center
direction	排列方向	horizontal / vertical	horizontal
size	间隔大小	enum / number / array	small
spacer	分隔符	string / number / VNode	—
wrap	是否自动折行	boolean	false
fill	子元素是否填充父容器	boolean	false
fill-ratio	填充父容器的比例	number	100
prefix-cls	类名前缀	string	—

Slots

名称	说明
default	需要添加间隔的元素

完整 API 参考 Element Plus Space。