Smart Form Builder

一个轻量级、可视化的表单构建器组件，支持通过拖拽方式快速生成自定义表单，无需编写代码即可完成表单的设计、预览和保存。

🔥 核心特性

拖拽式设计：从组件库拖拽表单组件到内容区，可视化操作

灵活的组件配置：每个组件支持自定义属性（标题、选项、必填等）

表单排序：支持表单内容区组件拖拽排序，调整题目展示顺序

实时预览：支持 PC / 手机端双端预览，所见即所得

轻量易用：基于 Vue 3 + Element Plus 开发，易集成、易扩展

📋 功能结构

Smart Form Builder 主要分为三个核心区域，各司其职、协同工作：

1、组件库区域 内置常用表单组件：单选框、复选框、输入框、文本域、下拉选择框等

每个组件支持拖拽，点击 / 拖拽即可添加到表单内容区

组件分类展示，清晰易找

2、表单内容区 展示已添加的所有表单组件，实时呈现表单结构

支持组件拖拽排序，调整题目展示顺序

点击组件可选中，联动组件设置区进行属性配置

空状态友好提示，引导用户添加组件

3、组件设置区 选中表单内容区的组件后，自动展示对应配置项

支持通用配置：标题、描述、是否必填、占位符等

4、组件特有配置： 单选 / 复选框：选项配置、布局方式（横向 / 纵向） 输入框：输入类型、最大长度、只读 / 禁用状态 文本域：行数、最大长度 下拉框：选项配置、是否支持多选 配置修改实时生效，无需刷新

辅助功能

预览功能：支持 PC / 手机端切换预览，还原表单实际展示效果

保存功能：保存完整表单（标题、描述、组件列表、组件属性）

🚀 快速开始

安装依赖

npm install

运行

npm run dev

基本使用

<script setup>
// 引入表单设置组件
import { FormDesign } from './components/index.js'
</script>

<template>
  <FormDesign></FormDesign>
</template>

<style scoped>
</style>

🔧 技术栈

框架：Vue 3

UI 组件库：Element Plus

核心能力：HTML5 Drag & Drop API（拖拽功能）

构建工具：Vite