简介

​FormCreate​ 是一个开源的动态表单生成组件，由xaboy开发，通过JSON数据驱动表单渲染，支持多种UI框架和移动端适配。它提供了强大的低代码表单解决方案，使开发者能够通过简单的JSON配置快速生成复杂的动态表单，大幅提高表单开发效率。

🔗 ​GitHub地址​：

https://github.com/xaboy/form-create

🚀 ​核心价值​：

低代码表单 · 多框架支持 · 动态渲染 · 可视化设计

​项目背景​：

• ​表单开发痛点​：响应复杂表单开发繁琐和重复的问题

• ​低代码趋势​：顺应低代码和可视化开发趋势

• ​多框架需求​：满足不同技术栈的表单开发需求

• ​开源生态​：提供开源的表单解决方案

​技术特色​：

• 📋 ​JSON驱动​：通过JSON配置生成复杂表单

• 🎨 ​多UI框架​：支持6+主流UI框架

• 📱 ​移动适配​：完美适配移动端设备

• 🔄 ​动态联动​：支持表单组件间动态联动

• 🛠️ ​可视化设计​：提供可视化表单设计器

​设计理念​：

• ​开发效率​：大幅提升表单开发效率

• ​灵活性​：支持高度自定义和扩展

• ​一致性​：保持不同框架的表单一致性

• ​易用性​：简单易用的API和配置

• ​性能优化​：高性能的表单渲染和操作

---

主要功能

1. ​核心功能体系​

FormCreate提供了一套完整的动态表单解决方案，专注于低代码开发、多框架支持和动态交互。

​表单生成​：

• ​JSON配置​：通过JSON对象定义表单结构和行为

• ​动态渲染​：实时动态渲染表单组件

• ​数据绑定​：自动数据绑定和状态管理

• ​验证规则​：内置表单验证和错误提示

• ​提交处理​：表单提交和数据收集处理

​UI框架支持​：

• ​Element UI​：Element Plus版本支持

• ​Ant Design​：Ant Design Vue版本

• ​Arco Design​：Arco Design框架支持

• ​Naive UI​：Naive UI组件库集成

• ​TDesign​：TDesign企业级设计系统

• ​iView​：iView UI框架支持

• ​View Design​：View Design组件库

• ​Vant​：移动端Vant框架支持

​高级功能​：

• ​组件联动​：表单组件间动态交互和依赖

• ​自定义组件​：支持任何Vue组件和HTML标签

• ​子表单​：嵌套子表单和分组支持

• ​动态规则​：运行时动态修改表单规则

• ​API操作​：丰富的表单操作和控制API

​设计器工具​：

• ​可视化设计​：拖拽式表单设计器

• ​实时预览​：设计时实时预览效果

• ​代码生成​：自动生成JSON配置代码

• ​模板管理​：表单模板保存和复用

• ​导出导入​：配置导入导出功能

2. ​功能详情​

​表单配置能力​：

基础配置:
- 字段定义: 表单字段名称、类型、标签
- 布局设置: 表单布局、排列方式
- 样式配置: 自定义样式和主题
- 验证规则: 字段验证规则和提示
- 事件处理: 表单事件和回调函数

组件类型:
- 输入框: 文本、数字、密码等输入框
- 选择器: 单选、多选、下拉选择
- 日期时间: 日期、时间选择器
- 上传组件: 文件上传和图片上传
- 评分组件: 星级评分和打分
- 滑块组件: 范围滑块和数值选择
- 开关组件: 开关和复选框
- 富文本: 富文本编辑器
- 自定义: 任何Vue组件集成

动态功能:
- 条件显示: 根据条件显示隐藏字段
- 动态选项: 动态更新选择项选项
- 值联动: 字段值变化触发其他字段更新
- 异步加载: 异步加载选项和数据
- 实时验证: 输入时实时验证和反馈

​多框架支持​：

Element UI:
- 组件库: Element Plus完整组件
- 主题支持: 多种主题和自定义主题
- 功能完整: 完整表单组件功能
- Vue3支持: Vue 3版本完整支持

Ant Design:
- 设计系统: Ant Design设计规范
- 企业级: 企业级应用支持
- 国际化: 多语言国际化支持
- 主题定制: 深度主题定制能力

移动端框架:
- Vant支持: 移动端Vant组件库
- 移动适配: 移动端界面和交互优化
- 手势支持: 移动端手势操作支持
- 响应式: 自适应不同屏幕尺寸

其他框架:
- Arco Design: 字节跳动设计系统
- Naive UI: 轻量级Vue组件库
- TDesign: 腾讯企业级设计系统
- iView: 成熟Vue UI框架
- View Design: View UI设计系统

​高级特性​：

组件联动:
- 值监听: 监听字段值变化
- 条件渲染: 根据条件显示隐藏组件
- 选项更新: 动态更新选择项
- 禁用控制: 动态禁用启用字段
- 样式变化: 动态修改组件样式

自定义扩展:
- 自定义组件: 集成任何Vue组件
- HTML标签: 支持原生HTML标签
- 第三方组件: 集成第三方组件库
- 插件系统: 扩展插件支持
- 模板组件: 自定义模板组件

性能优化:
- 懒加载: 组件懒加载和按需加载
- 虚拟滚动: 大数据量虚拟滚动
- 缓存机制: 数据缓存和性能优化
- 批量更新: 批量数据更新处理
- 内存管理: 高效内存使用和管理

​设计器功能​：

可视化设计:
- 拖拽布局: 拖拽组件进行布局
- 属性配置: 可视化属性配置面板
- 实时预览: 设计时实时效果预览
- 组件库: 内置组件库管理
- 模板库: 表单模板保存和复用

代码生成:
- JSON导出: 导出表单JSON配置
- 代码生成: 生成Vue组件代码
- 配置导入: 导入现有表单配置
- 版本管理: 配置版本管理和比较
- 协作设计: 团队协作设计支持

项目管理:
- 项目创建: 创建和管理表单项目
- 页面管理: 多页面表单管理
- 部署发布: 表单部署和发布
- 数据管理: 表单数据管理和分析
- 权限控制: 设计权限和访问控制

---

安装与配置

1. ​环境准备​

​系统要求​：

Vue版本: Vue 2.6+, Vue 2.7+, Vue 3.0+
Node.js: 14+
包管理器: npm, yarn, pnpm
内存: 4GB+ RAM
存储: 2GB+ 可用空间

UI框架要求:
- 根据选择的UI框架安装相应依赖
- 如使用Element UI: npm install element-plus
- 如使用Ant Design: npm install ant-design-vue

2. ​安装步骤​

​Vue 3安装（推荐）​​：

# 创建Vue项目
npm create vue@latest my-form-app
cd my-form-app

# 安装FormCreate和UI框架
npm install @form-create/element-ui@next
npm install element-plus

# 或使用Ant Design
npm install @form-create/ant-design-vue@next
npm install ant-design-vue

# 或使用Vant（移动端）
npm install @form-create/vant@next
npm install vant

​Vue 2安装​：

# Vue 2项目
npm install @form-create/element-ui
npm install element-ui

# 或Vue 2.7版本
npm install @form-create/element-ui@super

​设计器安装​：

# 安装可视化设计器
npm install @form-create/designer

# 或移动端设计器
npm install @form-create/vant-designer

​全局引入​：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import FormCreate from '@form-create/element-ui'

const app = createApp(App)
app.use(ElementPlus)
app.use(FormCreate)
app.mount('#app')

​按需引入​：

// 按需引入示例
import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElInput } from 'element-plus'
import FormCreate from '@form-create/element-ui'

const app = createApp(App)
app.use(ElButton)
app.use(ElInput)
app.use(FormCreate)
app.mount('#app')

3. ​配置说明​

​基本配置​：

// form-create配置
const formConfig = {
  form: {
    labelWidth: '100px',
    labelPosition: 'right',
    size: 'medium',
    disabled: false,
    inline: false
  },
  submitBtn: {
    show: true,
    text: '提交',
    loading: false
  },
  resetBtn: {
    show: true,
    text: '重置'
  }
}

​组件配置​：

// 表单规则配置
const rules = [
  {
    type: 'input',
    field: 'name',
    title: '姓名',
    value: '',
    props: {
      placeholder: '请输入姓名'
    },
    validate: [
      { required: true, message: '姓名不能为空', trigger: 'blur' }
    ]
  },
  {
    type: 'select',
    field: 'gender',
    title: '性别',
    value: '',
    options: [
      { value: 'male', label: '男' },
      { value: 'female', label: '女' }
    ],
    props: {
      placeholder: '请选择性别'
    }
  }
]

​主题配置​：

// 主题定制
const themeConfig = {
  primaryColor: '#1890ff',
  borderColor: '#d9d9d9',
  borderRadius: '4px',
  errorColor: '#ff4d4f',
  successColor: '#52c41a',
  warningColor: '#faad14',
  textColor: '#333333',
  disabledColor: '#f5f5f5'
}

​国际化配置​：

// 多语言支持
const i18nConfig = {
  locale: 'zh-CN',
  messages: {
    'zh-CN': {
      submit: '提交',
      reset: '重置',
      required: '该字段为必填项'
    },
    'en-US': {
      submit: 'Submit',
      reset: 'Reset',
      required: 'This field is required'
    }
  }
}

---

使用指南

1. ​基本工作流​

使用FormCreate的基本流程包括：项目设置 → 框架选择 → 表单设计 → 配置生成 → 集成使用 → 测试部署。整个过程设计为简单直观，开发者可以快速开始表单开发。

2. ​基本使用​

​快速开始​：

<template>
  <div class="form-container">
    <form-create 
      :rule="rules" 
      :option="options"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const rules = ref([
      {
        type: 'input',
        field: 'username',
        title: '用户名',
        value: '',
        props: {
          placeholder: '请输入用户名'
        },
        validate: [
          { required: true, message: '用户名不能为空' }
        ]
      },
      {
        type: 'password',
        field: 'password',
        title: '密码',
        value: '',
        props: {
          placeholder: '请输入密码'
        },
        validate: [
          { required: true, message: '密码不能为空' },
          { min: 6, message: '密码至少6位' }
        ]
      }
    ])

    const options = ref({
      submitBtn: {
        show: true,
        text: '登录'
      }
    })

    const onSubmit = (formData) => {
      console.log('表单数据:', formData)
      // 处理表单提交
    }

    return {
      rules,
      options,
      onSubmit
    }
  }
})
</script>

​复杂表单示例​：

// 复杂表单配置
const complexRules = [
  {
    type: 'group',
    title: '基本信息',
    children: [
      {
        type: 'input',
        field: 'name',
        title: '姓名',
        validate: [{ required: true }]
      },
      {
        type: 'select',
        field: 'education',
        title: '学历',
        options: [
          { value: 'highschool', label: '高中' },
          { value: 'college', label: '大专' },
          { value: 'bachelor', label: '本科' },
          { value: 'master', label: '硕士' }
        ]
      }
    ]
  },
  {
    type: 'group',
    title: '工作信息',
    children: [
      {
        type: 'input',
        field: 'company',
        title: '公司名称'
      },
      {
        type: 'input',
        field: 'position',
        title: '职位'
      }
    ]
  }
]

​动态联动示例​：

// 动态联动配置
const dynamicRules = [
  {
    type: 'select',
    field: 'country',
    title: '国家',
    value: 'china',
    options: [
      { value: 'china', label: '中国' },
      { value: 'usa', label: '美国' }
    ]
  },
  {
    type: 'select',
    field: 'city',
    title: '城市',
    value: '',
    options: [],
    effect: {
      fetch: (data) => {
        // 根据国家动态加载城市选项
        if (data.country === 'china') {
          return [
            { value: 'beijing', label: '北京' },
            { value: 'shanghai', label: '上海' }
          ]
        } else {
          return [
            { value: 'newyork', label: '纽约' },
            { value: 'losangeles', label: '洛杉矶' }
          ]
        }
      }
    }
  }
]

3. ​高级用法​

​自定义组件​：

<template>
  <form-create
    :rule="rules"
    :option="options"
    :value="formValue"
    @change="onChange"
  />
</template>

<script>
import customComponent from './CustomComponent.vue'

export default {
  data() {
    return {
      rules: [
        {
          type: 'input',
          field: 'name',
          title: '姓名'
        },
        {
          type: 'custom', // 自定义组件类型
          field: 'customField',
          title: '自定义字段',
          component: customComponent, // 自定义组件
          props: {
            // 传递给自定义组件的props
            customProp: 'value'
          }
        }
      ],
      formValue: {},
      options: {}
    }
  },
  methods: {
    onChange(value) {
      this.formValue = value
    }
  }
}
</script>

​API操作​：

// 表单API操作
const formApi = ref(null)

// 获取表单实例
const getFormInstance = () => {
  return formApi.value?.form
}

// 表单操作方法
const methods = {
  // 设置表单值
  setValue: (field, value) => {
    formApi.value?.setValue(field, value)
  },
  
  // 获取表单值
  getValue: (field) => {
    return formApi.value?.getValue(field)
  },
  
  // 验证表单
  validate: () => {
    return formApi.value?.validate()
  },
  
  // 重置表单
  reset: () => {
    formApi.value?.resetFields()
  },
  
  // 禁用表单
  disable: () => {
    formApi.value?.disable()
  },
  
  // 启用表单
  enable: () => {
    formApi.value?.enable()
  }
}

​可视化设计器使用​：

<template>
  <fc-designer ref="designer" />
</template>

<script>
import { FcDesigner } from '@form-create/designer'

export default {
  components: {
    FcDesigner
  },
  methods: {
    // 获取设计器配置
    getDesignerConfig() {
      return this.$refs.designer.getConfig()
    },
    
    // 导出JSON配置
    exportJson() {
      return this.$refs.designer.exportJson()
    },
    
    // 导入配置
    importJson(json) {
      this.$refs.designer.importJson(json)
    }
  }
}
</script>

---

应用场景实例

案例1：企业级后台管理系统表单

​场景​：企业后台管理系统需要大量复杂表单

​解决方案​：使用FormCreate快速生成管理系统中的各种表单页面。

​实施方法​：

// 用户管理表单
const userFormRules = [
  {
    type: 'input',
    field: 'username',
    title: '用户名',
    validate: [{ required: true }]
  },
  {
    type: 'password',
    field: 'password',
    title: '密码',
    validate: [
      { required: true },
      { min: 6, message: '密码至少6位' }
    ]
  },
  {
    type: 'select',
    field: 'role',
    title: '角色',
    options: [
      { value: 'admin', label: '管理员' },
      { value: 'user', label: '普通用户' },
      { value: 'guest', label: '访客' }
    ]
  },
  {
    type: 'switch',
    field: 'active',
    title: '激活状态',
    value: true
  }
]

// 使用Ant Design风格
import { useFormCreate } from '@form-create/ant-design-vue'

const { formCreate } = useFormCreate()

​管理系统功能​：

• ​用户表单​：用户注册、编辑、权限设置

• ​数据表单​：数据录入、编辑、查询

• ​配置表单​：系统配置、参数设置

• ​审批表单​：工作流审批表单

• ​报表表单​：数据报表和统计表单

​企业价值​：

• ​开发效率​：大幅减少表单开发时间

• ​一致性​：保持系统表单风格一致

• ​维护性​：易于维护和修改表单

• ​灵活性​：快速适应业务变化

• ​质量保证​：高质量的表单体验

案例2：移动端数据采集应用

​场景​：移动端应用需要数据采集和表单填写

​解决方案​：使用FormCreate with Vant生成移动端友好的表单界面。

​实施方法​：

// 移动端调查问卷
const surveyRules = [
  {
    type: 'input',
    field: 'name',
    title: '姓名',
    props: {
      placeholder: '请输入您的姓名'
    }
  },
  {
    type: 'radio',
    field: 'gender',
    title: '性别',
    options: [
      { value: 'male', label: '男' },
      { value: 'female', label: '女' }
    ]
  },
  {
    type: 'checkbox',
    field: 'hobbies',
    title: '兴趣爱好',
    options: [
      { value: 'reading', label: '阅读' },
      { value: 'sports', label: '运动' },
      { value: 'music', label: '音乐' }
    ]
  },
  {
    type: 'rate',
    field: 'satisfaction',
    title: '满意度评分',
    value: 3
  }
]

// 使用Vant移动端组件
import { useFormCreate } from '@form-create/vant'

​移动端特性​：

• ​触摸优化​：移动端触摸交互优化

• ​响应式布局​：自适应不同屏幕尺寸

• ​移动组件​：移动端专用表单组件

• ​手势支持​：手势操作和滑动支持

• ​性能优化​：移动端性能优化

​应用价值​：

• ​用户体验​：优秀的移动端表单体验

• ​开发速度​：快速开发移动端表单

• ​跨平台​：支持iOS和Android平台

• ​离线支持​：离线数据采集支持

• ​数据同步​：数据同步和云存储

案例3：可视化表单设计平台

​场景​：需要可视化设计和管理大量表单

​解决方案​：使用FormCreate设计器构建可视化表单设计平台。

​实施方法​：

<template>
  <div class="design-platform">
    <fc-designer
      ref="designer"
      :config="designerConfig"
      @save="onSaveDesign"
      @export="onExportConfig"
    />
  </div>
</template>

<script>
import { FcDesigner } from '@form-create/designer'

export default {
  components: {
    FcDesigner
  },
  data() {
    return {
      designerConfig: {
        menu: ['component', 'template', 'preview'],
        theme: 'light',
        language: 'zh-CN'
      }
    }
  },
  methods: {
    onSaveDesign(config) {
      // 保存表单设计
      this.saveToDatabase(config)
    },
    onExportConfig(json) {
      // 导出配置
      this.downloadJson(json)
    }
  }
}
</script>

​设计平台功能​：

• ​可视化设计​：拖拽式表单设计界面

• ​模板库​：丰富的表单模板

• ​团队协作​：多用户协作设计

• ​版本管理​：设计版本控制

• ​部署发布​：一键部署表单

​平台价值​：

• ​非技术友好​：非技术人员也可设计表单

• ​标准化​：促进表单设计标准化

• ​复用性​：提高表单组件复用率

• ​效率提升​：大幅提升表单设计效率

• ​质量保证​：保证表单设计和体验质量

---

总结

FormCreate作为一个强大的低代码动态表单组件，通过其JSON驱动、多框架支持和可视化设计能力，为表单开发提供了完整的解决方案。其开源特性和活跃的社区支持，使其成为表单开发的理想选择。

​核心优势​：

• 📋 ​低代码开发​：JSON配置驱动表单开发

• 🎨 ​多框架支持​：支持6+主流UI框架

• 📱 ​移动适配​：完美移动端支持

• 🛠️ ​可视化设计​：提供设计器工具

• 🔄 ​动态交互​：强大的组件联动能力

​适用场景​：

• 企业后台管理系统表单

• 移动端数据采集应用

• 可视化表单设计平台

• 快速原型开发

• 动态配置表单

​立即开始使用FormCreate，提升您的表单开发效率！​​

​资源链接​：

• 📚 ​官方文档​：GitHub README详细文档

• 🛠️ ​示例演示​：丰富的在线示例

• 💬 ​社区支持​：开发者讨论群629709230

• 🐛 ​问题反馈​：GitHub Issues

• 🔧 ​贡献指南​：欢迎社区贡献

​最佳实践​：

• 🎯 ​明确需求​：清晰定义表单需求和功能

• 🏗️ ​组件规划​：合理规划表单组件结构

• 🎨 ​UI统一​：保持UI风格一致性

• 🔍 ​测试验证​：充分测试表单功能和体验

• 📊 ​性能监控​：监控表单性能和使用情况

通过FormCreate，您可以：

• ​效率提升​：大幅提升表单开发效率

• ​质量保证​：保证表单质量和一致性

• ​灵活适应​：快速适应业务需求变化

• ​技术统一​：统一技术栈和开发规范

• ​创新探索​：探索新的表单交互和体验

​无论您是开发企业系统、移动应用还是设计平台，FormCreate都能为您提供强大的表单解决方案！​