t-form-dynamic-content

FormDynamicContent 动态表单内容

组件介绍

动态表单内容子组件，用于根据配置渲染不同类型的表单字段，支持多种表单组件类型，如输入框、选择器、单选框、复选框等。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <t-form-dynamic-content 
    :forms="formData" 
    :item="formItem"
  ></t-form-dynamic-content>
</template>

<script setup>
const formData = ref({
  username: '',
  password: '',
  gender: '',
  hobbies: [],
  avatar: [],
  rating: 3,
  agree: false
});

const formItem = ref({
  type: 'input',
  name: 'username',
  attrs: {
    placeholder: '请输入用户名',
    maxlength: 20
  }
});
</script>

Props

属性名	类型	默认值	说明	可选值
forms	Object	{}	表单数据对象	-
item	Object	{}	表单字段配置	-
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain

Events

事件名	说明	回调参数
click	点击时触发	-
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

支持的表单类型

类型	说明	对应组件
input	文本输入框	t-input
select	下拉选择器	t-select
pickerSelect	选择器	t-picker-select
radio	单选框组	t-radio-group
checkbox	复选框组	t-checkbox-group
code	验证码输入框	t-code-input
rate	评分组件	t-rate
switch	开关组件	t-switch
upload	文件上传	t-upload
stepper	步进器	t-stepper
slider	滑块组件	t-slider
textarea	文本域	t-textarea
color	颜色选择器	t-picker-color
date	日期选择器	t-select-date
city	城市选择器	t-picker-city
calendar	日历组件	t-calendar
pickercalendar	日历选择器	t-picker-calendar
cascader	级联选择器	t-cascader
file-manager	文件管理器	t-file-manager