Space 间距

常用的元素间距控制组件，基于 el-space 封装，API 完全兼容。

基础用法

查看代码

<template>
  <MgSpace>
    <MgButton>按钮 1</MgButton>
    <MgButton>按钮 2</MgButton>
    <MgButton>按钮 3</MgButton>
  </MgSpace>
</template>

垂直间距

查看代码

<template>
  <MgSpace direction="vertical" :size="16">
    <MgButton>按钮 1</MgButton>
    <MgButton>按钮 2</MgButton>
  </MgSpace>
</template>

自定义间距大小

查看代码

<template>
  <MgSpace :size="32">
    <MgButton>按钮 1</MgButton>
    <MgButton>按钮 2</MgButton>
  </MgSpace>
</template>

对齐方式

末尾对齐

查看代码

<template>
  <MgSpace align="end">
    <MgButton>按钮</MgButton>
    <span>末尾对齐</span>
  </MgSpace>
</template>

自动换行

查看代码

<template>
  <MgSpace wrap>
    <MgButton v-for="i in 10" :key="i">按钮 {{ i }}</MgButton>
  </MgSpace>
</template>

Attributes

继承 Element Plus Space 的全部 Attributes，无额外参数。

参数	说明	类型	默认值
direction	排列方向	'vertical' | 'horizontal'	horizontal
size	间距大小	'large' | 'default' | 'small' | number | [number, number]	8
align	对齐方式	'start' | 'center' | 'end' | 'baseline'	start
wrap	是否自动换行	boolean	false
fill	是否填充容器	boolean	false
spacer	分隔符	string | VNode	—

与 Element Plus 的差异

MgSpace 在 el-space 基础上追加 .mg-space 类名，便于样式覆写；其余行为完全一致，迁移时仅需将 el-space 替换为 MgSpace。