# vue自定义拖拽表单

**Repository Path**: cloudxf/drag-h5

## Basic Information

- **Project Name**: vue自定义拖拽表单
- **Description**: vue自定义拖拽表单,生成表单 
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-02
- **Last Updated**: 2026-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 表单设计器系统

## 概述
一个基于Vue.js的在线表单设计器系统，支持通过拖拽方式创建和自定义各种表单元素。

## 主要功能

### 可视化设计
- 拖拽方式添加和排列表单元素
- 实时预览表单效果

### 表单元素库
#### 通用元素
- 姓名
- 性别
- 年龄
- 手机号
- 验证码
- 城市选择
- 隐私协议
- 按钮

#### 拓展元素
- 文本框
- 下拉框
- 单选框
- 多选框

### 样式自定义
- **全局样式**：
  - 背景色
  - 边距
  - 圆角
  
- **元素样式**：
  - 颜色
  - 边框
  - 圆角

### 其他特性
- 响应式设计（适配不同设备）
- 内置表单验证规则

## 技术栈
| 技术 | 说明 |
|------|------|
| 前端框架 | Vue.js |
| UI组件 | 自定义CSS样式 |
| 数据管理 | Vue数据绑定和响应式系统 |

## 使用指南
1. **添加元素**：从左侧面板拖拽或点击添加
2. **预览效果**：在中间区域实时查看
3. **自定义设置**：在右侧面板调整元素属性
4. **保存设计**：点击"确定"按钮




# 生成表单

## 系统概述
基于Vue.js构建的动态贷款申请表单系统，支持灵活配置和高效数据收集。

## 核心功能

### 动态表单生成
- 通过JSON配置自动渲染表单元素
- 支持7种表单控件类型：
  - 📝 文本输入框（姓名/年龄/手机号）
  - 🔽 下拉选择框（城市/金额）
  - 🔘 单选按钮（性别选择）
  - ☑️ 多选框（资质选择）
  - 🔢 验证码输入（带获取验证码功能）
  - ✔️ 隐私协议勾选框
  - 🚀 提交按钮

### 智能验证系统
| 验证类型 | 说明 |
|---------|------|
| 必填验证 | 标记*号的必填字段 |
| 格式验证 | 手机号/年龄等格式校验 |
| 范围验证 | 年龄范围限制（18-70岁） |
| 自定义规则 | 支持扩展验证逻辑 |

### 特色功能
- **双模式多选框**：
  - 单字段多选模式
  - 多字段单选模式
- **短信验证码**：60秒倒计时功能
- **数据预处理**：自动格式化提交数据
- **完整协议**：内嵌用户隐私协议

## 技术架构
```mermaid
graph TD
    A[Vue.js] --> B[数据绑定]
    A --> C[组件化]
    D[jQuery] --> E[DOM操作]
    F[Layer] --> G[弹窗交互]
    H[JSON] --> I[配置驱动]