Space 间距

用于在组件之间提供统一的间距，避免重复使用 Divider 或手写 margin 样式。

import { createApp } from 'vue'
import { Space as ElSpace } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSpace)

基础用法

通过 el-space 为多个子组件之间提供一致的水平间距，默认间距为 small (8px)。

<template>
  <el-space>
    <el-button>Button 1</el-button>
    <el-button type="primary">Button 2</el-button>
    <el-button type="success">Button 3</el-button>
  </el-space>
</template>

<script lang="ts" setup>
import { Space as ElSpace, Button as ElButton } from '@szhn/dh-design-pc'

</script>

垂直布局

通过 direction="vertical" 可切换为垂直排列，底层使用 flex-direction。

<template>
  <el-space direction="vertical" style="width: 240px;">
    <el-card v-for="i in 3" :key="i" shadow="hover">List item {{ i }}</el-card>
  </el-space>
</template>

<script lang="ts" setup>
import { Space as ElSpace, Card as ElCard } from '@szhn/dh-design-pc'

</script>

控制间距的大小

通过 size 属性使用内置尺寸 small / default / large，分别对应 8px、12px、16px。

<template>
  <div class="demo-col">
    <el-radio-group v-model="size">
      <el-radio value="large">large</el-radio>
      <el-radio value="default">default</el-radio>
      <el-radio value="small">small</el-radio>
    </el-radio-group>
    <el-space :size="size">
      <el-button>Button 1</el-button>
      <el-button>Button 2</el-button>
      <el-button>Button 3</el-button>
      <el-button>Button 4</el-button>
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Space as ElSpace, Button as ElButton, RadioGroup as ElRadioGroup, Radio as ElRadio } from '@szhn/dh-design-pc'


const size = ref<'large' | 'default' | 'small'>('default')
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

自定义 Size

size 也可以传入数字，对应像素值，可搭配 Slider 动态调整。

<template>
  <div class="demo-col">
    <el-slider v-model="size" :max="48" style="max-width: 320px;" />
    <el-space :size="size">
      <el-button type="primary">Button 1</el-button>
      <el-button type="primary">Button 2</el-button>
      <el-button type="primary">Button 3</el-button>
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Space as ElSpace, Button as ElButton, Slider as ElSlider } from '@szhn/dh-design-pc'


const size = ref(16)
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

自动换行

在水平方向下，通过 wrap 属性开启自动换行，适合标签、按钮组等场景。

<template>
  <el-space wrap style="width: 320px; border: 1px dashed var(--el-border-color); padding: 12px;">
    <el-button v-for="i in 10" :key="i">按钮 {{ i }}</el-button>
  </el-space>
</template>

<script lang="ts" setup>
import { Space as ElSpace, Button as ElButton } from '@szhn/dh-design-pc'

</script>

行间分隔符

通过 spacer 属性可以设置分隔符，支持字符串或 VNode，如 Divider 组件。

<template>
  <div class="demo-col">
    <el-space spacer="|">
      <span v-for="i in 4" :key="i">item {{ i }}</span>
    </el-space>
    <el-space :spacer="spacer">
      <span v-for="i in 4" :key="i">row {{ i }}</span>
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { Space as ElSpace, Divider as ElDivider } from '@szhn/dh-design-pc'

const spacer = h(ElDivider, { direction: 'vertical' })
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

对齐方式

alignment 属性透传到 align-items，可用于调整不同高度的子元素对齐方式。

<template>
  <div class="demo-col">
    <el-radio-group v-model="alignment">
      <el-radio value="flex-start">flex-start</el-radio>
      <el-radio value="center">center</el-radio>
      <el-radio value="flex-end">flex-end</el-radio>
    </el-radio-group>
    <el-space :alignment="alignment" style="width: 100%; border: 1px dashed var(--el-border-color); padding: 12px;">
      <div style="height: 60px; background: var(--el-color-primary-light-7); padding: 0 12px; line-height: 60px;">Tall</div>
      <div style="height: 32px; background: var(--el-color-primary-light-8); padding: 0 12px; line-height: 32px;">Normal</div>
      <div style="height: 20px; background: var(--el-color-primary-light-9); padding: 0 12px; line-height: 20px;">Short</div>
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Space as ElSpace, RadioGroup as ElRadioGroup, Radio as ElRadio } from '@szhn/dh-design-pc'


const alignment = ref<'flex-start' | 'center' | 'flex-end'>('center')
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

填充容器

fill 设置为 true 时，子元素会自动填满容器宽度。

<template>
  <div class="demo-col">
    <el-switch v-model="fill" active-text="fill" />
    <el-space :fill="fill" wrap style="width: 100%;">
      <el-card v-for="i in 3" :key="i" shadow="never">List item {{ i }}</el-card>
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Space as ElSpace, Card as ElCard, Switch as ElSwitch } from '@szhn/dh-design-pc'


const fill = ref(true)
</script>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

API

Attributes

属性名	说明	类型	默认值
alignment	对齐方式	align-items 枚举	center
direction	排列方向	horizontal / vertical	horizontal
size	间隔大小	enum / number / array	small
spacer	分隔符	string / number / VNode	—
wrap	是否自动折行	boolean	false
fill	子元素是否填充父容器	boolean	false
fill-ratio	填充父容器的比例	number	100
prefix-cls	类名前缀	string	—

Slots

名称	说明
default	需要添加间隔的元素

完整 API 参考 Element Plus Space。