FormDesigner 表单设计器

可视化拖拽表单构建器，支持通过拖拽组件到画布来快速生成表单。

使用方式

<template>
  <FormDesigner v-model="formSchema" @save="onSave" />
</template>

<script setup>
import { ref } from 'vue'
import FormDesigner from '@/components/form-designer/FormDesigner.vue'

const formSchema = ref([])

function onSave(schema) {
  console.log('表单 Schema:', schema)
}
</script>

Props

属性	类型	说明
modelValue	Array	表单字段 Schema 数组（v-model）
initialSchema	Array	初始 Schema（用于加载已有表单）

Events

事件	参数	说明
update:modelValue	(schema: Array)	Schema 变更
save	(schema: Array)	保存表单
cancel	-	取消编辑

暴露方法

方法	返回值	说明
getFormSchema()	Array	获取当前表单 Schema
setFormSchema(schema)	-	设置表单 Schema

支持的组件类型

基础组件（10 个）

组件	类型值	说明
输入框	input	文本输入
多行文本	textarea	多行文本输入
数字	number	数字输入
下拉选择	select	下拉选项
单选框	radio	单选按钮组
复选框	checkbox	多选按钮组
日期选择	date	日期选择器
时间选择	time	时间选择器
开关	switch	开关组件
滑块	slider	滑块组件

高级组件（6 个）

组件	类型值	说明
上传	upload	文件上传
富文本	richText	富文本编辑器
级联选择	cascader	级联选择器
树选择	treeSelect	树形选择器
颜色选择	colorPicker	颜色选择器
评分	rate	评分组件

布局组件（3 个）

组件	类型值	说明
分割线	divider	分割线
标题	title	标题
描述	description	描述文本

布局结构

三面板布局：

1. 左侧 — 组件面板（基础/高级/布局组件分类）
2. 中间 — 设计画布（支持拖拽排序，使用 vuedraggable）
3. 右侧 — 属性编辑器（编辑选中组件的属性）

FormItemRender — 字段渲染器

负责根据 Schema 渲染单个表单字段。

<FormItemRender
  :item="fieldSchema"
  v-model="formData[fieldSchema.key]"
  :disabled="false"
/>

Props

属性	类型	说明
item	Object	字段 Schema（必填）
modelValue	any	字段值
disabled	Boolean	是否禁用
preview	Boolean	预览模式

Events

事件	参数	说明
update:modelValue	(value)	值变更
change	(value)	值变更

FormPreview — 表单预览

从 Schema 渲染完整表单，支持验证和提交。

<template>
  <FormPreview
    :form-items="formSchema"
    @submit="onSubmit"
  />
</template>

Props

属性	类型	说明
formItems	Array	表单 Schema
schema	Array	备用 Schema

Events

事件	参数	说明
submit	(formData)	表单提交
change	(formData)	表单数据变更

暴露方法

方法	说明
getFormData()	获取表单数据
setFormData(data)	设置表单数据
validate()	表单验证
reset()	重置表单

依赖

• vuedraggable
• naive-ui
• FormItemRender.vue
• FormPreview.vue