# WingBlank 左右间距 V2.1.0+

概述

左右间距，布局组件，主要用于设置元素内容两侧空白间距。

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

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

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

import fuiWingBlank from "@/components/firstui/fui-wing-blank/fui-wing-blank.vue"
export default {
	components:{
		fuiWingBlank
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

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

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

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

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

基础使用

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

<fui-wing-blank size="small">
	<view class="fui-block"></view>
</fui-wing-blank>

1
2
3

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

1
2
3
4
5

设置自定义间距

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

<fui-wing-blank gap="64">
	<view class="fui-block"></view>
</fui-wing-blank>

1
2
3

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

1
2
3
4
5

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

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

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