更新记录

1.0.1（2026-10-12） 下载此版本

• 按项目目标标准重构：props.ts + vant-space.scss + Vue3 TS .vue。
• 实现 Vant Space 核心 API：direction / size / align / wrap / fill。
• 移除 uni-icons / 业务导航依赖，零业务耦合。

平台兼容性

uni-app(3.8.5)

uni-app x(3.8.5)

其他

vant-space 间距

设置元素之间的间距，支持水平/垂直排列、自定义间距、对齐方式与自动换行。

引入

经 easycom 自动注册，无需手动 import：

<template>
  <vant-space>
    <vant-button type="primary">按钮 A</vant-button>
    <vant-button type="primary">按钮 B</vant-button>
  </vant-space>
</template>

代码演示

基础用法

<template>
  <vant-space>
    <vant-button type="primary">按钮</vant-button>
    <vant-button type="primary">按钮</vant-button>
    <vant-button type="primary">按钮</vant-button>
    <vant-button type="primary">按钮</vant-button>
  </vant-space>
</template>

垂直排列

<template>
  <vant-space direction="vertical" fill>
    <vant-button type="primary">按钮</vant-button>
    <vant-button type="primary">按钮</vant-button>
    <vant-button type="primary">按钮</vant-button>
  </vant-space>
</template>

自定义间距

<template>
  <vant-space :size="20">
    <vant-button type="primary">间距 20px</vant-button>
    <vant-button type="primary">间距 20px</vant-button>
    <vant-button type="primary">间距 20px</vant-button>
  </vant-space>

  <vant-space :size="[30, 20]">
    <vant-button type="primary">水平 30</vant-button>
    <vant-button type="primary">水平 30</vant-button>
    <vant-button type="primary">水平 30</vant-button>
  </vant-space>
</template>

对齐方式

<template>
  <vant-space align="center">
    <vant-button type="primary">center</vant-button>
    <view style="height: 80px; background: #fff;">Block</view>
  </vant-space>
</template>

自动换行

<template>
  <vant-space wrap>
    <vant-button v-for="i in 8" :key="i" type="primary">按钮</vant-button>
  </vant-space>
</template>

API

Props

Slots

Events

无（纯布局组件，不对外派发事件）。

主题定制

组件本身不依赖额外颜色令牌；间距通过 size prop 控制。如需统一调整，可在宿主 uni.scss 中定义间距变量并在调用处传入。

常见问题

• 子元素间距不一致？ 检查是否传入数组形式的 size，或是否开启了 wrap 导致垂直方向也产生间距。
• 垂直排列时想占满宽度？ 同时设置 direction="vertical" 与 fill。