# tui-form-item 表单项 V2.0.0+ 会员组件

介绍

表单项，展示表单页面的信息结构样式。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiFormItem from "@/components/thorui/tui-form-item/tui-form-item.vue"
export default {
	components:{
		tuiFormItem
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

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

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-form-item": "/components/thorui/tui-form-item/tui-form-item"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 label 属性设置标题内容。

<tui-form-item label="标题文本">
	<input class="tui-input" placeholder="文本输入框" placeholder-style="color:#ccc" />
</tui-form-item>
<tui-form-item label="标题文本">
	<tui-switch scaleRatio=".8"></tui-switch>
</tui-form-item>

内容居右

通过 label 属性设置标题内容，使用插槽设置右侧展示内容。

<!--uni-app-->
<tui-form-item label="内容居右">
	<template v-slot:right>
		<tui-switch scaleRatio=".8"></tui-switch>
	</template>
</tui-form-item>

<!--微信小程序-->
<tui-form-item label="内容居右">
   <tui-switch slot="right" scaleRatio=".8"></tui-switch>
</tui-form-item>

选择/带星号

通过 label 属性设置标题内容，asterisk 属性设置是否带星号，arrow 属性设置是否为选择模式（带箭头），highlight 属性设置点击效果。

<!--uni-app-->
<tui-form-item label="选择标题" asterisk arrow highlight>
	<tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled backgroundColor="transparent"></tui-input>
</tui-form-item>

<!--微信小程序-->
<tui-form-item label="选择标题" asterisk arrow highlight>
	<tui-input padding="0" borderBottom="{{false}}" placeholder="请选择" disabled backgroundColor="transparent"></tui-input>
</tui-form-item>

# Slots

插槽名称	说明
default	内容居左展示，仅接标题后面
right	内容居右展示

# Props

属性名	类型	说明	默认值
padding	String	padding值	26rpx 30rpx
marginTop	Number, String	margin-top值，单位rpx	0
marginBottom	Number, String	margin-bottom值，单位rpx	0
label	String	标题文本	-
labelSize	Number, String	标题文本字体大小，单位rpx	32
labelColor	String	标题文本颜色	#333
labelFontWeight V2.8.0+	Number, String	标题文本字重	400
labelWidth	Number, String	标题文本宽度，单位rpx	140
labelRight	Number, String	标题文本距离右侧内容距离，单位rpx	16
asterisk	Boolean	是否带星号	false
asteriskColor	String	星号颜色	#EB0909
background	String	背景颜色	#fff
highlight	Boolean	是否有点击效果	false
arrow	Boolean	是否带箭头	false
arrowColor	String	箭头颜色	#c0c0c0
bottomBorder	Boolean	是否显示底部边框	true
borderColor	String	底部边框颜色	#eaeef1
left	Number, String	底部边框距离左侧距离，单位rpx	30
right	Number, String	底部边框距离右侧距离，单位rpx	0
radius	String	圆角值	0rpx
index	Number, String	自定义参数，点击时回传	0

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

# 线上程序扫码预览


ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码

← tui-text 文本 tui-link 超链接 →