FormItem 表单项，主要用于表单组件相关布局使用。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

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

基础使用

通过 label 属性设置标签文本。

<wui-form-item label="活动名称">
<wui-input :borderBottom="false" :padding="[0]" placeholder="请输入活动名称"></wui-input>
</wui-form-item>
<wui-form-item label="手机号码">
<input class="wui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
</wui-form-item>
<wui-form-item label="其他">
<wui-switch :scaleRatio="0.9"></wui-switch>
</wui-form-item>

必填星号

通过 label 属性设置标签文本，asterisk 属性设置是否显示星号。

<wui-form-item label="姓名" asterisk>
<wui-input :borderBottom="false" :padding="[0]" placeholder="请输入姓名"></wui-input>
</wui-form-item>
<wui-form-item label="手机号码" asterisk>
<input class="wui-page__input" placeholder="请输入手机号码" placeholder-style="color:#ccc;" />
</wui-form-item>

选择、显示箭头

通过 label 属性设置标签文本，arrow 属性设置是否显示箭头，highlight 属性设置是否需要点击效果。

<wui-form-item label="活动时间" asterisk arrow highlight>
<wui-input :borderBottom="false" :padding="[0]" placeholder="请选择时间" disabled
           backgroundColor="transparent"></wui-input>
</wui-form-item>
<wui-form-item label="地区" arrow highlight>
<input class="wui-page__input" placeholder="请选择地区" placeholder-style="color:#ccc;" disabled />
</wui-form-item>

Slots

插槽名称	说明
default	组件内部内容，由表单组件组成
right	组件右侧显示内容

Props

属性名	类型	说明	默认值	平台差异说明
padding	Array	padding值（上，右，下，左），同css顺序,如：['32rpx','32rpx']	['28rpx', '32rpx']	-
marginTop	Number, String	margin-top值，单位rpx	0	-
marginBottom	Number, String	margin-bottom值，单位rpx	0	-
label	String	标签文本	-	-
labelSize	Number, String	标题字体大小，单位rpx，默认使用全局设置值	0	-
labelColor	String	标题字体颜色，默认使用Form组件props属性值	-	-
labelWidth	Number, String	label宽度，单位rpx，默认使用全局设置值	0	-
labelRight	Number, String	label与右侧内容距离，单位rpx，默认使用全局设置值	0	-
labelAlign	String	label对齐方式，可选值：left，right	left	-
asterisk	Boolean	是否显示必填的红色星号	false	-
asteriskColor	String	星号颜色，默认使用Form组件props属性值	-	-
asteriskPosition	String	星号位置，可选值：left，right	left	-
background	String	item项背景颜色	#fff	-
highlight	Boolean	是否有点击效果	false	-
arrow	Boolean	是否需要箭头（选择效果）	false	-
arrowColor	String	箭头颜色	#B2B2B2	-
bottomBorder	Boolean	是否需要底部边框	true	-
borderColor	String	底部边框颜色	#EEEEEE	-
left	Number, String	底部边框left值，单位rpx	32	-
right	Number, String	底部边框right值，单位rpx	0	-
radius	String	item项圆角值	0rpx	-
param	Number, String	自定义参数，随点击事件回传	0	-

Events

事件名	说明	回调参数
@click	item项点击时触发	{ param : 自定义参数 }