# vue3-form-making

**Repository Path**: blind181/vue3-form-making

## Basic Information

- **Project Name**: vue3-form-making
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-07
- **Last Updated**: 2025-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Form Making

基于 Vue3 + Element Plus 的可视化表单设计器，让表单开发更简单、更高效。

## 特性

- 🎨 **可视化设计** - 通过拖拽方式快速创建表单
- 📦 **丰富的组件** - 支持 13+ 种表单组件
- 🎯 **表单渲染** - 基于 JSON 配置快速渲染表单
- 🌍 **国际化** - 内置中英文支持
- 📱 **响应式布局** - 支持栅格布局
- ✨ **Vue3 + Composition API** - 采用最新 Vue3 技术栈
- 🎭 **Element Plus** - 基于 Element Plus UI 组件库

## 安装

```bash
npm install vue3-form-making
```

## 快速开始

### 全局注册

```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Vue3FormMaking from 'vue3-form-making'
import App from './App.vue'

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

### 按需引入

```javascript
import { MakingForm, GenerateForm } from 'vue3-form-making'

export default {
  components: {
    MakingForm,
    GenerateForm
  }
}
```

## 使用示例

### 表单设计器 (MakingForm)

```vue
<template>
  <making-form
    ref="makingForm"
    preview
    generate-json
    generate-code
    clearable
    style="height: 600px;"
  />
</template>

<script setup>
import { ref } from 'vue'

const makingForm = ref(null)

// 获取表单 JSON 配置
const getFormJson = () => {
  const json = makingForm.value.getJson()
  console.log(json)
}

// 设置表单 JSON 配置
const setFormJson = (json) => {
  makingForm.value.setJson(json)
}
</script>
```

### 表单渲染器 (GenerateForm)

```vue
<template>
  <generate-form
    :data="formData"
    ref="generateForm"
    v-model:value="formValue"
  />
  <el-button @click="handleSubmit">提交</el-button>
</template>

<script setup>
import { ref } from 'vue'

const generateForm = ref(null)
const formValue = ref({})
const formData = ref({
  list: [
    {
      type: 'input',
      label: '姓名',
      model: 'name',
      key: 'name',
      options: {
        width: '100%',
        defaultValue: '',
        placeholder: '请输入姓名',
        required: true
      }
    }
  ],
  config: {
    labelWidth: '100px',
    labelPosition: 'right',
    size: 'default'
  }
})

const handleSubmit = async () => {
  try {
    const data = await generateForm.value.getData()
    console.log('表单数据:', data)
  } catch (error) {
    console.error('表单验证失败')
  }
}
</script>
```

## 组件 API

### MakingForm Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| preview | 显示预览按钮 | boolean | false |
| generateJson | 显示导出JSON按钮 | boolean | false |
| generateCode | 显示导出代码按钮 | boolean | false |
| clearable | 显示清空按钮 | boolean | false |

### MakingForm Methods

| 方法名 | 说明 | 参数 |
|--------|------|------|
| getJson | 获取表单配置JSON | - |
| setJson | 设置表单配置JSON | json |

### GenerateForm Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| data | 表单配置数据 | object | - |
| value / v-model:value | 表单数据 | object | {} |

### GenerateForm Methods

| 方法名 | 说明 | 返回值 |
|--------|------|--------|
| getData | 获取表单数据（会触发验证） | Promise |
| reset | 重置表单 | - |

## 支持的表单组件

### 基础组件

- 单行文本 (input)
- 多行文本 (textarea)
- 计数器 (number)
- 单选框组 (radio)
- 多选框组 (checkbox)
- 下拉选择器 (select)
- 开关 (switch)
- 滑块 (slider)
- 日期选择器 (date)
- 时间选择器 (time)
- 评分 (rate)
- 颜色选择器 (color)
- 上传 (upload)

### 布局组件

- 栅格布局 (grid)

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库文件
npm run build:lib

# 构建生产版本
npm run build
```

## 项目结构

```
vue3-form-making/
├── src/
│   ├── components/
│   │   ├── MakingForm/          # 表单设计器组件
│   │   │   ├── index.vue
│   │   │   ├── WidgetFormItem.vue
│   │   │   ├── WidgetConfig.vue
│   │   │   └── FormConfig.vue
│   │   └── GenerateForm/        # 表单渲染器组件
│   │       ├── index.vue
│   │       └── GenerateFormItem.vue
│   ├── config/
│   │   └── widget.js            # 组件配置
│   ├── locale/                  # 国际化
│   │   ├── index.js
│   │   ├── zh-CN.js
│   │   └── en-US.js
│   ├── App.vue                  # Demo 应用
│   ├── main.js
│   └── index.js                 # 入口文件
├── index.html
├── vite.config.js
└── package.json
```

## 技术栈

- Vue 3.4+
- Element Plus 2.5+
- Vite 5+
- Vue I18n 9+
- vuedraggable

## License

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！