# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
Last Updated: 5/18/2023, 2:31:09 PM