# WhiteSpace 上下间距 V2.1.0+

概述

上下间距，布局组件，主要用于设置内容之间上下间距使用。

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiWhiteSpace from "@/components/firstui/fui-white-space/fui-white-space.vue"
export default {
	components:{
		fuiWhiteSpace
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 size 属性设置间距大小，默认值有small（8rpx）、default（16rpx）、large（24rpx）。

<view class="fui-block"></view>
<fui-white-space size="small"></fui-white-space>
<view class="fui-block"></view>

1
2
3

.fui-block {
	width: 100%;
	height: 80rpx;
	background-color: #fff;
}

1
2
3
4
5

设置自定义间距

通过 height 属性设置自定间距，设置自定义间距后 size 属性失效。

<view class="fui-block"></view>
<fui-white-space height="10"></fui-white-space>
<view class="fui-block"></view>

1
2
3

.fui-block {
	width: 100%;
	height: 80rpx;
	background-color: #fff;
}

1
2
3
4
5

插槽名称	说明
default	标签内显示的自定义内容

属性名	类型	说明	默认值	平台差异说明
size	String	默认间距大小，可选值small（8rpx）、default（16rpx）、large（24rpx）默认优先使用全局配置	default	-
height	Number, String	自定义间距大小，单位rpx，设置后则size失效	0	-
background	String	间距背景颜色	transparent	-

事件名	说明	回调参数
@click	点击间距元素时触发	-