# layui-form-build

**Repository Path**: funadmin/layui-form-build

## Basic Information

- **Project Name**: layui-form-build
- **Description**: 基于layui Sortable拖拽组件完成的表单设计器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-20
- **Last Updated**: 2025-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-form-build

## 介绍
这是一个基于 [Layui](https://www.layui.site/) 框架开发的表单设计器，利用了 Layui 的 Sortable 拖拽组件功能，允许用户通过拖拽方式快速构建表单。

该设计器提供了以下功能：
- **拖拽组件**：支持将预定义的表单组件拖拽到设计画布上。
- **组件面板**：提供多种常用表单组件，例如输入框、下拉框、单选框等。
- **配置面板**：可对已选组件进行配置，例如设置字段名、标签、默认值等。
- **保存功能**：支持将设计好的表单保存为模板。

以下是设计器的主要界面结构：
- **设计区域**：包含组件面板、画布区域和配置面板。
- **工具栏**：提供保存、预览等操作按钮。
- **表单保存弹窗**：用于保存表单时输入表单名称和描述。

## 软件架构
该项目基于 HTML、CSS 和 JavaScript 开发，主要依赖 [Layui](https://www.layui.site/) 框架，核心功能通过 DOM 操作和事件绑定实现拖拽、组件渲染和配置功能。

主要模块包括：
- **组件面板**：提供可拖拽的表单组件。
- **设计画布**：用于放置和排列拖拽的组件。
- **配置面板**：动态显示当前选中组件的配置项。
- **保存功能**：将设计好的表单保存为 JSON 数据。

## 安装说明
1. 下载项目代码。
2. 将项目文件放置在 Web 服务器目录下（如 Apache、Nginx 或任意支持静态 HTML 的服务器）。
3. 确保引入 Layui 框架（可通过 CDN 或本地文件引入）。
4. 打开 `form-build.html` 文件即可使用。

## 使用说明
1. 打开页面后，左侧为组件面板，中间为设计画布，右侧为配置面板。
2. 拖拽组件到画布区域，组件会自动渲染并绑定事件。
3. 点击画布中的组件，右侧配置面板会显示对应的配置项。
4. 修改配置后，画布中的组件会实时更新。
5. 点击工具栏中的“保存”按钮，输入表单名称和描述，即可保存表单。

## 贡献指南
欢迎贡献代码或提出建议！请遵循以下步骤：
1. Fork 项目。
2. 创建新分支。
3. 提交代码更改。
4. 发起 Pull Request。

## Gitee 特性
- 支持在线查看和编辑代码。
- 提供代码片段分享功能。
- 支持 Issues 和 Pull Requests 管理。

---

**注意**：该项目依赖 Layui 框架，请确保在使用时正确引入相关资源。