Space 间距

用于设置组件与组件之间的统一呼吸间距容器，避免手动书写繁琐的 margin 样式。既支持包裹子节点自动弹性间距排列，也支持独立自闭合作为占位空白块。

---

代码示例

1. 水平排列间距 (Horizontal)

默认 direction="row"，自动为子组件绑定均匀的水平间距。

<template>
  <mu-space>
    <mu-button size="small" type="primary">按钮一</mu-button>
    <mu-button size="small" type="success">按钮二</mu-button>
    <mu-button size="small" type="warning">按钮三</mu-button>
  </mu-space>
</template>

---

2. 预设尺寸与自定义数值 (Size)

支持预设快捷尺寸 small (12rpx)、medium (20rpx)、large (32rpx)，或直接传入任意数字/CSS 长度字符串。

<template>
  <!-- 预设小号间距 (12rpx) -->
  <mu-space size="small">
    <mu-tag type="primary">Vue3</mu-tag>
    <mu-tag type="success">UniApp</mu-tag>
    <mu-tag type="warning">VitePress</mu-tag>
  </mu-space>

  <!-- 预设大号间距 (32rpx) -->
  <mu-space size="large">
    <mu-button size="small" type="primary">主要</mu-button>
    <mu-button size="small" type="error">删除</mu-button>
  </mu-space>

  <!-- 自定义数值 (50rpx) -->
  <mu-space :size="50">
    <mu-badge count="8"><mu-icon name="bell" size="24" /></mu-badge>
    <mu-badge count="99+"><mu-icon name="mail" size="24" /></mu-badge>
  </mu-space>
</template>

---

3. 垂直列方向间距 (Vertical)

设置 direction="column"（或 dir="column"）让子组件按垂直方向纵向堆叠，搭配 block 填满全宽。

<template>
  <mu-space direction="column" block align="start">
    <mu-button block type="primary">通栏提交按钮 1</mu-button>
    <mu-button block plain type="primary">通栏取消按钮 2</mu-button>
  </mu-space>
</template>

---

4. 垂直对齐方式 (Align)

使用 align 控制交叉轴对齐，可选 start（顶部对齐）、center（居中对齐）、end（底部对齐）。

<template>
  <mu-space align="end" size="large">
    <mu-button size="large" type="primary">Large 48px</mu-button>
    <mu-button size="small" type="success">Small 32px</mu-button>
    <span>底部对齐 (end)</span>
  </mu-space>
</template>

---

5. 独立占位空白块 (Standalone Spacer)

不包裹任何子节点时，自闭合 <mu-space :height="40" /> 可作为垂直空白占位块使用。

<template>
  <div>上方视图区块</div>
  
  <!-- 独立产生 40rpx 的空白间距 -->
  <mu-space :height="40" />
  
  <div>下方视图区块</div>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
size	组件间距大小 (支持预设词或数值)	Number | String	small | medium | large | 数字(rpx) | '30px'	20
height	占位块高度或间距大小 (同 size)	Number | String	-	''
direction	间距排列方向 (同 dir)	String	row | column	'row'
dir	间距排列方向 (别名属性)	String	row | column	''
align	交叉轴对齐方式	String	start | center | end | baseline	'center'
wrap	水平模式下是否自动换行	Boolean	true | false	true
block	是否独占一行宽度的块级 Flex	Boolean	true | false	false

---

插槽说明 (Slots)

插槽名	说明
default	需要产生间距排列的多个子组件或节点