Space 间距
Space 用于在多个元素之间设置统一间距。VISTA B 直接使用 Element Plus 的 el-space，适合按钮组、操作区、标签列表、卡片列表等需要保持稳定间隔的场景。
基础用法
用 el-space 包裹多个元素，组件会自动给子元素添加统一间距。
vue
<el-space wrap>
<div v-for="item in 3" :key="item" class="space-demo-card">
<div class="space-demo-card__header">
<span>卡片名称</span>
<el-button type="primary" link>操作</el-button>
</div>
<div v-for="line in 4" :key="line">列表项 {{ line }}</div>
</div>
</el-space>垂直布局
使用 direction="vertical" 可以让元素纵向排列。
vue
<el-space direction="vertical">
<el-button>保存</el-button>
<el-button>预览</el-button>
</el-space>控制间距
size 支持内置尺寸 small、default、large，对应 8px、12px、16px。默认间距为 small。
vue
<el-space :size="size">
<el-button type="primary">保存</el-button>
<el-button>取消</el-button>
<el-button>预览</el-button>
</el-space>自定义 Size
当内置尺寸不满足设计要求时，可以传入数字，也可以传入 [horizontal, vertical] 分别控制横向与纵向间距。
vue
<el-space wrap :size="[20, 16]">
<el-button>操作 1</el-button>
<el-button>操作 2</el-button>
</el-space>自动换行
在水平布局下加上 wrap，内容宽度不足时会自动折行。
vue
<el-space wrap>
<el-button v-for="item in 18" :key="item" text>
Text button
</el-button>
</el-space>行间分隔符
spacer 可以传入文字、数字，也可以传入 VNode。常见用法是为操作项增加分隔符。
vue
<el-space spacer="|">
<el-button>按钮 1</el-button>
<el-button>按钮 2</el-button>
</el-space>对齐方式
用 alignment 调整子元素在交叉轴上的对齐方式，可选值与 CSS align-items 一致。
vue
<el-space alignment="flex-start">
<span>文本</span>
<el-button>按钮</el-button>
</el-space>填充容器
加上 fill 后，子元素会填充父容器。fill-ratio 可以控制填充比例，默认值为 100。
vue
<el-space fill wrap :fill-ratio="30" style="width: 100%">
<div>卡片 1</div>
<div>卡片 2</div>
<div>卡片 3</div>
</el-space>API
Space 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
direction | 排列方向 | horizontal / vertical | horizontal |
alignment | 对齐方式，对应 CSS align-items | string | center |
size | 间距大小 | small / default / large / number / [number, number] | small |
wrap | 是否自动折行 | boolean | false |
spacer | 间隔符 | string / number / VNode | 空 |
fill | 子元素是否填充父容器 | boolean | false |
fill-ratio | 填充父容器的比例 | number | 100 |
class | 自定义类名 | string / object / array | 空 |
style | 自定义样式 | string / object / array | 空 |
prefix-cls | space-item 类名前缀 | string | 空 |
Space 插槽
| 插槽 | 说明 |
|---|---|
default | 需要添加间隔的元素 |