t-form-modal

FormModal 表单弹窗

组件介绍

动态表单模态框组件，通过JSON配置弹出编辑框，支持多种表单组件类型，attrs可绑定事件和ref，实现表单各组件的关联控制。

平台兼容

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

基础用法

<template>
  <t-form-modal ref="formModalRef" @confirm="handleConfirm" @cancel="handleCancel"></t-form-modal>
  <t-button type="primary" @click="openInput">打开输入框</t-button>
  <t-button type="primary" @click="openSelect">打开选择器</t-button>
  <t-button type="primary" @click="openRadio">打开单选框</t-button>
</template>

<script setup>
const formModalRef = ref(null);

function openInput() {
  formModalRef.value.show({
    name: 'username',
    type: 'input',
    title: '请输入用户名',
    describe: '用户名长度为2-20个字符',
    value: '',
    attrs: {
      placeholder: '请输入用户名',
      maxlength: 20
    }
  });
}

function openSelect() {
  formModalRef.value.show({
    name: 'city',
    type: 'select',
    title: '请选择城市',
    describe: '请选择您所在的城市',
    value: '',
    list: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' },
      { label: '深圳', value: 'shenzhen' }
    ],
    attrs: {
      placeholder: '请选择城市'
    }
  });
}

function openRadio() {
  formModalRef.value.show({
    name: 'gender',
    type: 'radio',
    title: '请选择性别',
    describe: '请选择您的性别',
    value: '',
    list: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ],
    attrs: {
      mode: 'button'
    }
  });
}

function handleConfirm(data) {
  console.log('确认提交:', data);
  // 处理提交的数据
}

function handleCancel() {
  console.log('取消操作');
}
</script>

Props

属性名	类型	默认值	说明	可选值
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
confirmText	String	"确认"	提示框确认按钮的文本	-

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发
cancel	取消填写	-
transitionend	动画结束时触发	boolean

Methods

方法名	说明	参数	返回值
show	显示模态框	option: UTSJSONObject	无

支持的表单类型

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