Space

通过这个组件来给组件之间提供统一的间距。

基础用法

最基础的用法，通过这个组件来给组件之间提供统一的间距。

<template>
  <v-space wrap>
    <v-button v-for="key in 4" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

控制间距的大小

通过调整 size 的值来控制间距的大小

<template>
  <v-space direction="column">
    <v-space wrap size="small">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
    <v-space wrap size="medium">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
    <v-space wrap size="large">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
    <v-space wrap size="4rem">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
  </v-space>
</template>

排列方向

垂直布局, 使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制.

<template>
  <v-space direction="column">
    <v-button v-for="key in 4" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

自动换行

通过wrap控制设置自动换行

<template>
  <v-space wrap>
    <v-button v-for="key in 30" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

对齐方式

通过align-items控制子节点对齐方式

stretch

---

center

---

start

---

end

---

normal

---

<script setup lang="ts">
const alignItems = ['stretch', 'center', 'start', 'end', 'normal'];
</script>

<template>
  <template v-for="align in alignItems" :key="align">
    <v-space :align-items="align">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
      <div :style="{ height: '60px', border: '1px solid red', background: 'gray' }">
        {{ align }}
      </div>
    </v-space>
    <hr>
  </template>
</template>

充满整行

通过fill控制子节点充满整行

<template>
  <v-space fill>
    <v-button v-for="key in 4" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

API

space 属性

属性名	说明	类型	默认值
size	间距大小	string | enum	medium
align-items	对齐方式	enum	normal
direction	排列方向	enum	row
wrap	是否自动换行	boolean	false
fill	是否充满整行	boolean	false

space 插槽

插槽名	描述
default	默认插槽