vue3-form-create

基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 与 cdn 引入的方式。UI 库支持 ant-design-vue 与 element-plus。

支持功能

• 远端数据获取
• 图片上传
• 富文本编辑器
• 栅格布局
• 生成 JSON
• 生成代码

3. 不想在全局安装也可以在组件内直接使用相应的组件。

   import {
     AntdDesignForm,
     ElDesignForm,
     AntdGenerateForm,
     ElGenerateForm
   } from 'vue-form-create'
   

示例

npm 引入

import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue-form-create'
import 'ant-design-vue/dist/antd.css'

createApp(App)
  .use(antd)
  .use(DesignForm)
  .mount('#app')

2 组件说明

表单设计器（AntdDesignForm）

示例

<template>
  <AntdDesignForm ref="designForm" />
</template>

API

Props

方法

通过 ref 可以获取到实例并调用实例方法

字段说明

基础字段（basicFields）

高级字段（advanceFields）

布局字段（layoutFields）

表单生成器（AntdGenerateForm）

示例

<template>
  <AntdGenerateForm ref="generateForm" />
</template>

API

Props

方法

通过 ref 可以获取到实例并调用实例方法

3 功能说明

远端数据

单选框，多选框，下拉选择框、级联选择器等选择项需要通过数据生成，这时可以配置远端数据。

设置远端方法地址与返回值。

文件上传

填写服务器上传地址、参数名等配置信息。