本文由TinySpace组件贡献者夏雯斐同学原创。

前言

近期，TinyVue正式发布 v3.27.0版本，这次版本更新也增加了很多新特性，space组件就是其中比较重要的一个特性。 Space组件 是 OpenTiny Vue组件库中的一个布局容器组件，用于在子元素之间提供灵活的间距控制。 它支持水平与垂直方向排列、自动换行、对齐与分布控制、以及顺序调整等功能，能帮助开发者轻松实现响应式、整齐的组件布局。

适用场景

• 表单项或按钮组的布局
• 列表项的水平/垂直间距
• 工具栏元素的分布控制
• 在响应式布局中控制间距与换行

环境准备与安装

1. 环境要求

确保已安装 Node.js 10.13+ 及包管理器 npm/pnpm/yarn。

node -v

2. 安装 OpenTiny Vue

# npm
npm install @opentiny/vue

# 或 pnpm
pnpm add @opentiny/vue

3.引入TinySpace

import { TinySpace } from '@opentiny/vue'

快速开始

基础使用

<template>
  <div id="tiny-space-all" style="padding: 16px; max-width: 600px">
    <h2>TinySpace 全功能演示</h2>

    <!-- 控制面板 -->
    <div style="margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px;">
      <!-- 间距控制 -->
      <div>
        <strong>间距：</strong>
        <tiny-button @click="size = [10, 10]">[10, 10]</tiny-button>
        <tiny-button @click="size = [10, 30]">[10, 30]</tiny-button>
        <tiny-button @click="size = [20, 40]">[20, 40]</tiny-button>
      </div>

      <!-- 布局方向 -->
      <div>
        <strong>方向：</strong>
        <tiny-button-group>
          <tiny-button @click="direction = 'row'">水平 row</tiny-button>
          <tiny-button @click="direction = 'column'">垂直 column</tiny-button>
        </tiny-button-group>
      </div>

      <!-- 主轴对齐 -->
      <div>
        <strong>主轴对齐 (justify)：</strong>
        <tiny-select v-model="justify" style="width: 160px">
          <tiny-option label="start" value="start" />
          <tiny-option label="center" value="center" />
          <tiny-option label="end" value="end" />
          <tiny-option label="space-between" value="space-between" />
          <tiny-option label="space-around" value="space-around" />
        </tiny-select>
      </div>

      <!-- 交叉轴对齐 -->
      <div>
        <strong>交叉轴对齐 (align)：</strong>
        <tiny-select v-model="align" style="width: 160px">
          <tiny-option label="start" value="start" />
          <tiny-option label="center" value="center" />
          <tiny-option label="end" value="end" />
          <tiny-option label="baseline" value="baseline" />
        </tiny-select>
      </div>

      <!-- 自动换行 -->
      <div>
        <tiny-switch v-model="wrap" active-text="自动换行" inactive-text="不换行" />
      </div>

      <!-- 顺序控制 -->
      <div>
        <strong>顺序控制：</strong>
        <tiny-button @click="order = ['3', '1', '2']">3 → 1 → 2</tiny-button>
        <tiny-button @click="order = ['2', '3', '1']">2 → 3 → 1</tiny-button>
        <tiny-button @click="order = []">原顺序</tiny-button>
      </div>
    </div>

    <!-- Space 布局演示 -->
    <tiny-space
      class="tiny-space-demo"
      :size="size"
      :direction="direction"
      :justify="justify"
      :align="align"
      :wrap="wrap"
      :order="order"
      style="border: 1px dashed #bbb; padding: 10px; min-height: 120px;"
    >
      <tiny-button key="1" type="primary">按钮 1</tiny-button>
      <tiny-button key="2" type="success">按钮 2</tiny-button>
      <tiny-button key="3" type="warning">按钮 3</tiny-button>
      <tiny-button key="4" type="danger">按钮 4</tiny-button>
      <tiny-button key="5" type="info">按钮 5</tiny-button>
    </tiny-space>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyButton, TinyButtonGroup, TinySwitch, TinySelect, TinyOption } from '@opentiny/vue'
import TinySpace from '@opentiny/vue-space'


// 响应式配置项
const size = ref([10, 20])
const direction = ref('row')
const justify = ref('start')
const align = ref('center')
const wrap = ref(true)
const order = ref([])
</script>

<style scoped>
.tiny-space-demo .tiny-button {
  min-width: 80px;
}
</style>

默认方向为 row（水平排列），默认间距为 8px。

配置详解

1.控制间距 size

size 是最核心的属性，支持多种写法。

1.1数值写法

<tiny-space :size="20"/>

间距为 20px。

1.2数组写法（[rowGap, columnGap]）

<tiny-space :size="[50, 50]"/>

行间距 50px，列间距 50px，方便实现不等距布局。

1.3字符串写法

<tiny-space size="100px"/>

间距为 100px

<tiny-space size="small"/>
// small | medium | large

2.控制排列方向 direction

<tiny-space :size="12" direction="row"/>

• 'row'（默认）：水平排列

• 'column'：垂直排列

可以通过切换 direction 实现响应式布局（如手机端竖排、PC端横排）。

3.对齐 align 与分布 justify

通过 align 和 justify 控制元素对齐与分布方式。

3.1 justify

<tiny-space :size="10" justify="center"/>

3.2 aligin

<tiny-space :size="10" align="baseline"/>     

4.自动换行 wrap

<tiny-space :wrap="true" :size="[10, 12]">
  <tiny-button v-for="n in 10" :key="n">按钮 {{ n }}</tiny-button>
</tiny-space>

效果： 当宽度不够时，按钮会自动换行，仍然保持间距一致。

5.控制顺序 order

<template>
  <tiny-space :order="order" style="border: 1px dashed #ccc">
    <tiny-button key="1">First Button</tiny-button>
    <tiny-button key="2">Second Button</tiny-button>
    <tiny-button key="3">Third Button</tiny-button>
    <tiny-button>Fourth Button</tiny-button>
  </tiny-space>
</template>
<script setup>
import { TinyButton, TinySpace } from '@opentiny/vue'
const order = ['2', '3', '1'] // 自定义顺序：第二个、第三个、然后第一个
</script>

设置 order="['2', '3', '1']" 后，渲染顺序会变为 2 → 3 → 1。

适用于在响应式布局中快速调换内容顺序。

6.嵌套布局（组合使用）

<tiny-space direction="column" :size="16">
 <tiny-space direction="row" :size="8">
  <tiny-button>左</tiny-button>
  <tiny-button>中</tiny-button>
  <tiny-button>右</tiny-button>
 </tiny-space>

 <tiny-space direction="row" :size="8">
  <tiny-button>上</tiny-button>
  <tiny-button>下</tiny-button>
 </tiny-space>
</tiny-space>

7.测试与稳定性

TinySpace 已通过 Playwright E2E 自动化测试，验证：

• 间距正确渲染（rowGap / columnGap）

• 动态数据更新响应

• 换行与方向切换稳定

• 兼容 Vue 2 & Vue 3 环境

8.最佳实践总结

9.小结

TinySpace 是一个轻量级、灵活的布局组件，专为控制子元素间距而设计。 它支持：

• 数值、预设、数组多种间距形式
• 垂直与水平排列
• 自动换行与对齐分布
• 顺序控制
• Vue 2 / Vue 3 双版本兼容

通过它，开发者可以轻松构建整洁、美观、响应式的 UI 布局。

属性一览

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design

OpenTiny 代码仓库：https://github.com/opentiny

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor ~ 如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献 ~