Create Form Config

一个基于Vue 3的表单设计器组件库，支持拖拽式表单配置。

特性

• 🎨 基于Vue 3和Ant Design Vue
• 🖱️ 拖拽式表单设计
• 📝 丰富的表单组件支持
• 🔧 灵活的配置选项
• 🌍 国际化支持
• 📱 响应式设计
• 👁️ 增强的预览功能
  • 表单实时预览
  • 代码生成预览
  • 数据编辑器
  • 全屏预览模式
  • 表单验证测试
  • 代码下载功能

安装

npm install create-form-config

使用

基本用法

<template>
  <div>
    <fc-designer :config="config" :locale="locale" @save="saveFormConfig" />
  </div>
</template>

<script>
import FcDesigner from 'create-form-config';
import 'create-form-config/dist/index.css';

export default {
  components: {
    FcDesigner
  },
  data() {
    return {
      config: {
        // 表单配置
      },
      locale: 'zh-cn'
    };
  },
  methods: {
    saveFormConfig(config) {
      console.log('保存的配置:', config);
    }
  }
};
</script>

### 全局注册

```javascript
import { createApp } from 'vue';
import FcDesigner from 'create-form-config';
import 'create-form-config/dist/index.css';

const app = createApp(App);
app.use(FcDesigner);

API

FcDesigner Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | config | 表单配置 | Object | - | | locale | 语言设置 | String | 'zh-cn' |

FcDesigner Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | save | 保存配置时触发 | (config: Object) |

预览功能

基本预览

点击工具栏中的"预览"按钮可以打开预览窗口，支持以下功能：

• 表单预览模式: 实时预览表单效果
• 组件代码模式: 查看生成的Vue组件代码
• HTML代码模式: 查看生成的HTML代码

增强预览功能

数据编辑器

• 点击"数据编辑"按钮可以打开数据编辑器
• 支持JSON格式的预览数据输入
• 实时更新表单数据

表单操作

• 提交: 测试表单提交功能
• 重置: 重置表单数据
• 验证: 测试表单验证规则

代码操作

• 复制: 复制生成的代码到剪贴板
• 下载: 下载代码文件到本地

全屏模式

• 点击全屏按钮可以进入全屏预览模式
• 提供更大的预览空间

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

许可证

MIT