TMUI 3.1.09
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

表单 Form ​

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。。

🌶️ 表单 Form 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app ref="app" color="grey-5">
		<tm-form @submit="confirm" ref="form" v-model="show" :label-width="190" >
			<tm-form-item
				desc="你可以点击提交表单来验证"
				required
				label="身份证号码"
				field="nameuser.a"
				:rules="[
					{ required: true, message: '不能为空', validator: (val) => val.length > 0 },
					{ required: true, message: '请输入66', validator: (val) => val == '66' }
				]"
			>
				<!-- 不要问我为什么用v-model.lazy，我很受伤。 -->
				<tm-input :inputPadding="[0, 0]" v-model.lazy="show.nameuser.a" :transprent="true" :showBottomBotder="false"> </tm-input>
			</tm-form-item>
			<tm-form-item required label="选择日期" field="cale" :rules="[{ required: true, message: '请选择日期哦' }]">
				<view @click="showCal = !showCal" class="flex flex-row flex-row-center-between">
					<tm-text :userInteractionEnabled="false" :label="caleStr || '请选择有效日期'"></tm-text>
					<tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
				</view>
			</tm-form-item>
			<tm-form-item
				:padding="[0, 0]"
				requiredTitleChangeColor
				label="选择地区"
				field="city"
				required
				:rules="[{ required: true, message: '请选择地区' }]"
			>
				<view @click="testClick" class="flex flex-row flex-row-center-between">
					<tm-text :userInteractionEnabled="false" :label="show.cityStr || '请选择所在地区地址'"></tm-text>
					<tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
				</view>
			</tm-form-item>
			<tm-form-item required label="时间选择" field="time" :rules="[{ required: true, message: '请选择时间+++' }]">
				<view @click="showTimePickerView = !showTimePickerView" class="flex flex-row flex-row-center-between">
					<tm-text :userInteractionEnabled="false" :label="timeStr || '请选择时间'"></tm-text>
					<tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
				</view>
			</tm-form-item>

			<tm-form-item required label="弹出选择" field="pickerStr" :rules="[{ required: true, message: '请选择水果种类' }]">
				<view @click="showPicker = !showPicker" class="flex flex-row flex-row-center-between">
					<tm-text :userInteractionEnabled="false" :label="show.pickerStr || '请选择水果呀'"></tm-text>
					<tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
				</view>
			</tm-form-item>
			<tm-form-item required label="选择水果" field="radio" :rules="[{ required: true, message: '请选择水果' }]">
				<tm-radio-group v-model="show.radio">
					<tm-radio label="苹果" value="apple"></tm-radio>
					<tm-radio label="香焦" value="bonaer"></tm-radio>
				</tm-radio-group>
			</tm-form-item>

			<tm-form-item required label="多选水果种类" field="checkbox" :rules="[{ required: true, message: '请选择' }]">
				<tm-checkbox-group v-model="show.checkbox">
					<tm-checkbox label="苹果" value="apple"></tm-checkbox>
					<tm-checkbox label="香焦" value="bonaer"></tm-checkbox>
					<tm-checkbox label="香焦" value="bonaer2"></tm-checkbox>
					<tm-checkbox label="香焦" value="bonaer3"></tm-checkbox>
					<tm-checkbox label="香焦" value="bonaer4"></tm-checkbox>
				</tm-checkbox-group>
			</tm-form-item>

			<tm-form-item required label="评分" field="rate" :rules="[{ required: true, message: '请选择' }]">
				<tm-rate v-model="show.rate" :default-value="show.rate"></tm-rate>
			</tm-form-item>

			<tm-form-item
				required
				label="价格选择"
				field="slider"
				:rules="[{ required: true, message: '请选择', validator: (val) => val.reduce((a, b) => Math.abs(a - b)) !== 0 }]"
			>
				<tm-slider :width="450" v-model="show.slider" :default-value="show.slider"></tm-slider>
			</tm-form-item>

			<tm-form-item required label="分割选择" field="segtab" :rules="[{ required: true, message: '请选择' }]">
				<tm-segtab :width="420" :list="[{ text: '苹果' }, { text: '香蕉' }]" v-model="show.segtab" :default-value="show.segtab"></tm-segtab>
			</tm-form-item>

			<tm-form-item label="开关" field="switch" :rules="{ required: true, message: '没有选中哦' }">
				<tm-switch v-model="show.switch" :default-value="show.switch" selected="hehe"></tm-switch>
			</tm-form-item>

			<tm-form-item required label="上传截图" field="upload" :rules="{ required: true, message: '请上传' }">
				<tm-upload
					:rows="3"
					:width="420"
					:default-value="show.upload"
					url="https://mockapi.eolink.com/tNYKNA7ac71aa90bcbe83c5815871a5b419601e96a5524d/upload"
					v-model="show.upload"
				></tm-upload>
			</tm-form-item>

			<tm-form-item :border="false">
				<view class="flex flex-row">
					<view class="flex-1 mr-32">
						<tm-button form-type="submit" label="提交表单" block></tm-button>
					</view>
					<view class="flex-1">
						<tm-button :shadow="0" text form-type="reset" label="重置表单" block></tm-button>
					</view>
				</view>
			</tm-form-item>
		</tm-form>

		<tm-calendar v-model="show.cale" v-model:show="showCal" :default-value="show.cale"></tm-calendar>
		<tm-city-picker v-model="show.city" v-model:model-str="show.cityStr" v-model:show="showCity" :default-value="show.city"></tm-city-picker>
		<tm-time-picker
			v-model="show.time"
			v-model:show="showTimePickerView"
			:show-detail="{ year: false, month: false, day: true, hour: true }"
		></tm-time-picker>

		<tm-picker
			:columns="pickerlist"
			v-model:model-str="show.pickerStr"
			v-model:show="showPicker"
			:default-value="show.pickerIndex"
			v-model="show.pickerIndex"
		></tm-picker>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, nextTick, getCurrentInstance, computed } from 'vue'
import * as dayjs from '@/tmui/tool/dayjs/esm/index'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmCheckboxGroup from '@/tmui/components/tm-checkbox-group/tm-checkbox-group.vue'
import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
import tmRate from '@/tmui/components/tm-rate/tm-rate.vue'
import tmSlider from '@/tmui/components/tm-slider/tm-slider.vue'
import tmSegtab from '@/tmui/components/tm-segtab/tm-segtab.vue'
import tmSwitch from '@/tmui/components/tm-switch/tm-switch.vue'
import tmUpload from '@/tmui/components/tm-upload/tm-upload.vue'
import tmCalendar from '@/tmui/components/tm-calendar/tm-calendar.vue'
import tmCityPicker from '@/tmui/components/tm-city-picker/tm-city-picker.vue'
import tmTimePicker from '@/tmui/components/tm-time-picker/tm-time-picker.vue'
import tmPicker from '@/tmui/components/tm-picker/tm-picker.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmFormItem from '@/tmui/components/tm-form-item/tm-form-item.vue'
import tmForm from '@/tmui/components/tm-form/tm-form.vue'
const app = ref<InstanceType<typeof tmApp> | null>(null)
const form = ref<InstanceType<typeof tmForm> | null>(null)
const DayJs = dayjs.default
const showCal = ref(false)
const showCity = ref(false)
const showTimePickerView = ref(false)
const showPicker = ref(false)
const pickerStr = ref('')
const pickerlist = ref([
	{
		text: '苹果',
		id: 1
	},
	{
		text: '香蕉',
		id: 2
	},
	{
		text: '李子',
		id: 3
	},
	{
		text: '椰子',
		id: 4
	}
])

const show = ref({
	cale: ['2022-1-4'],
	caleStr: '2022-1-4',
	time: '',
	radio: '', //bonaer
	pickerIndex: [1],
	pickerStr: '',
	checkbox: [],
	rate: 0,
	slider: [0, 50],
	segtab: '',
	switch: 'hehe',
	upload: [],
	city: [],
	cityStr: '',
	nameuser: {
		a: '测试'
	},
	testff: [],
	ha: false
})
const timeStr = computed(() => (!show.value.time ? '' : DayJs(show.value.time).format('DD日 HH时')))
const caleStr = computed(() => {
	if (!show.value.cale || !Array.isArray(show.value.cale)) return ''
	if (show.value.cale.length == 0) return ''
	return DayJs(show.value.cale[0]).format('YYYY年MM月DD日')
})

const confirm = (e) => {
	console.log(e)
}

const testClick = () => {
	showCity.value = !showCity.value
}
</script>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
modelValueObjecttrue绑定对象值
marginArray<number>[32,24]外间距[x,y]x=左右，y=上下
paddingArray<number>[16,0]内间距[x,y]x=左右，y=上下
layoutStringhorizontal表单标签是竖还是横排列:vertical,horizontal。
labelWidthNumber160如果为0表示自动宽度。
labelAlignStringleft标签对齐方式
borderBooleantrue显示下划线。
transprentBooleanfalse是否透明背景。

submit,validate校验后都将得到一致的结果参数从3.1.03开始

🌹 事件 ​

事件名参数返回数据描述
submit-result表单提交函数
reset--重置表单函数
validate-result执行表单检验，返回验证结果对象，内有isPass属性表示是否验证通过
clearValidate--清除验证函数
update:modelValue--更新表单绑定值

从3.1.03开始,result结构如下：

ts
{ 
	data: {
		...form的modelValue数据
	},
	// 所有与form-item绑定的filed字段校验的结果数组。
	result:{
		message:string,//校验后的提示文本
		validator: boolean,//是否校验通过
	}[],
	isPass:boolean //是否校验通过
}

🌽 slot插槽 ​

默认default

🥗 ref方法 ​

方法名参数返回值描述
submit--提交表单
reset--重置表单
validate-result手动校验表单，返回验证结果对象，内有isPass属性表示是否验证通过
clearValidate--清除校验状态
pushKeyitem:formItem--
delKeyitem:formItem--
tmFormComnameId--tmFormId

🌱 FormItem参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
parentClassString''表单的父类,可以添加自定类名,影响内部
alignString''这个属性主要是用来让左边标题和右边的表单等内容的对齐方式.正常情况用不到.只有在左边和右边内容高度不一致时,比如右边是多行文本或者上传组件,需要上对齐时能用到.此时可以写上flex-row-top-start
labelString''显示名称
descString''底部表单说明文字
marginArray<number>[12,12]外间距[x,y]x=左右，y=上下
padding<Array<number>[0,0]内间距[x,y]x=左右，y=上下
fieldString''如果在forom绑定的model为深层对象，这里的名称需要如下:比如model = {a:2,b:{c:333}}，如果想绑定c,则field = "b.c"
helpString''表单底部的单项注意说明。
requiredBooleanfalse是否显示必填的红色星号*
rulesv3.0.71+ObjectArray<rulesItem>检验规则,格式见下方
borderBooleannull显示下划线。
showErrorv3.0.71+Booleannull校验不通过的情况下，是否显示错误信息提示
requiredTitleChangeColorv3.0.81+Booleantrue校验不通过时，是否让标题跟着变化文字颜色，默认是。
errHeightv3.1.04+Number30错误空间的高度
labelWidthv3.1.07+Number0标题宽度，如果为0统一使用form上的设置的宽度

在3.0.71版本以前rules只支持Object,之后支持Array<rulesItem>。为了向下兼容，之后的版本也是支持非数据校验函数。

rules类型rulesItem 格式如下：

ts
export interface rulesItem {
    validator?:Function|boolean,//检验函数。可以是Promise异步回调。
    required?:boolean,//是否必填。
    message?:string,//检验不合格时的文本
}

🌽 FormItem slot插槽 ​

默认default
插槽:label,表单标题插件 插槽:desc,表单底部的说明文字 插槽:error,表单底部的错误插槽，返回数据 data.message,

ts
v-slot:error = "{data}"
data.message读取错误信息

💏 文档贡献 ​

此页文档由Sunlight贡献，如果对该框架感兴趣的可以参与我们一同进步！