Space 空白占位

空白占位组件用于在布局中添加空白区域，以调整元素之间的间距。

导入

import Height from '@/components/layout/space/Height.vue'
import Width from '@/components/layout/space/Width.vue'

用法

高度占位

通过 Height 组件可以在垂直方向上添加空白占位。

<template>
  <FlexCol>
    <text>上方文本内容</text>
    <Height :size="20" />
    <text>中间文本内容，与上方有20px的间距</text>
    <Height :size="75" />
    <text>下方文本内容，与中间有75px的间距</text>
  </FlexCol>
</template>

宽度占位

通过 Width 组件可以在水平方向上添加空白占位。

<template>
  <FlexRow>
    <text>左侧文本内容</text>
    <Width :size="60" />
    <text>右侧文本内容，与左侧有60px的间距</text>
  </FlexRow>
</template>

使用主题尺寸

可以通过主题变量来设置占位尺寸，使布局更加统一。

<template>
  <FlexRow>
    <text>左侧文本内容</text>
    <Width size="spaceSize.lg" />
    <text>右侧文本内容，使用主题变量定义的大尺寸间距</text>
  </FlexRow>
</template>

API 参考

Height

高度占位组件，用于在垂直方向上添加空白区域。

Props

名称	说明	类型	必填	默认值
size	占位高度，可以是数字或字符串	number | string	-	''

Slots

名称	说明
default	默认插槽，可在占位区域插入自定义内容

Width

宽度占位组件，用于在水平方向上添加空白区域。

Props

名称	说明	类型	必填	默认值
size	占位宽度，可以是数字或字符串	number | string	-	''

Slots

名称	说明
default	默认插槽，可在占位区域插入自定义内容