uniapp开发一个动态表单组件-也许最佳实践

文档

发布文档
插件地址

HbuilderX上传到dcloud的插件库

组件展示

wangzy-dynamicForm

vue3 动态表单组件，基于 uniapp 开发，样式需要 sass 支持

组件说明

这是一个灵活的动态表单组件，支持多种输入类型，包括文本输入、选择器和日期时间选择等。

安装

在 uni_modules 目录下导入该组件。

基本使用

<template>
  <wangzy-dynamicForm :formConfig="formConfig" v-model:formData="formData" @onChange="handleChange" />
</template>

属性说明

属性名	类型	默认值	说明
formConfig	Array	[]	表单配置项数组
formData	Object	{}	表单数据对象
padding	Number	0	表单内边距（rpx）
backgroundColor	String	‘#fff’	表单背景色
layout	String	‘vertical’	布局方式，支持 ‘horizontal’/‘vertical’
labelColor	String	‘#333’	标签文字颜色

表单配置项说明

每个配置项支持以下属性：

{
  type: String,       // 输入类型：'input'/'select'/'datetime'
  field: String,      // 字段名
  label: String,      // 标签文本
  required: Boolean,  // 是否必填
  placeholder: String,// 占位文本
  disabled: Boolean,  // 是否禁用
  showClear: Boolean, // 是否显示清除按钮
  hidden: Boolean,    // 是否隐藏
  // input类型特有属性
  inputType: String,  // 输入框类型
  maxLength: Number,  // 最大长度
  // select类型特有属性
  options: Array,     // 选项数组
  rangeKey: String,   // 选项标签键名
  // datetime类型特有属性
  format: String,     // 日期格式，默认'yyyy-MM-dd'
  ranges: Array       // 时间选择范围
}

事件

事件名	说明	回调参数
onChange	表单值变化时触发	(field, value)

示例

const formConfig = [
  {
    type: 'input',
    field: 'name',
    label: '姓名',
    required: true,
    placeholder: '请输入姓名',
  },
  {
    type: 'select',
    field: 'gender',
    label: '性别',
    options: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
    ],
    placeholder: '请选择性别',
  },
  {
    type: 'datetime',
    field: 'birthday',
    label: '生日',
    format: 'yyyy-MM-dd',
    placeholder: '请选择日期',
  },
];