npm i vue3-form-designer

import { reactive } from "vue";
import { FormDesigner } from "vue3-form-designer";
import "vue3-form-designer/dist/style.css";
let data = reactive({});
//上传配置
let uploadOptions = {
  action: 'http://localhost/UploadFile',
  getHeaders: function () {
    return { 'token': '123456' };
  },
  getFileHook: (res) => {
    if (res.success) {
      return {
        name: res.url.substr(res.url.lastIndexOf('/') + 1),
        url: res.url
      };
    } else {
      return res.msg;
    }
  }
}
// 默认控件配置
let controlGroups = [
  {
    name: '基础组件',
    controls: ['input', 'textarea', 'inputnumber', 'select', 'radio', 'checkbox',
      'rate', 'color', 'date', 'time', 'switch', 'slider', 'text', 'html', 'link', 'divider']
  },
  {
    name: '高级组件',
    controls: ['subForm','upload', 'uploadImage', 'region', 'cascader', 'editor','table','tab','geographicalPosition']
  }, 
    {
        name: '个性化组件',
        controls: [
                    'position', 
                    'licenseDistinguish', 
                    'businessLicenseDistinguish', 
                    'faceDistinguish',
                    'voiceToText', 
                    'licensePlateDistinguish', 
                    'idCardDistinguish', 
                    'currencyOcr','autograph',
                    'qrcode','code32','txcode',
        ]
    }
];

// 英文值下拉数据，如果有长度，则是下拉，没有该数据则是输入框
const enData = {
    label:'label',//指定显示的key
    value:'value',//指定v-model的key
    options:[
        {label: '选择1',value: '1'},
        {label: '选择2',value: '2'}
    ]//数据集合
}

//自定义表单项按钮点击事件
function itemCustomButtonClick(element) {
    console.log(element)
}

//删除表单元素
const deleteItem = (element)=>{
    console.log('删除表单元素：',element)
}
//复制表单元素
const copyItem = (element)=>{
    console.log('复制表单元素：',element)
}

import test1 from './components/custom/test1'
import test2 from './components/custom/test2'
//自定义组件
const customComponents = [
    {
        groupName: '自定义组件1',
        components: {test1,test2}
    },
    {
        groupName: '自定义组件2',
        components: {test1,test2}
    }
]

<FormDesigner ... :customComponents="customComponents">

test1、test2分别为目录，该目录下包含：
    index.js 控制器,定义组件的所有属性内容
    PropsEditor.vue 定义组件的属性配置项
    Renderer.vue 拖拽该组件后呈现的内容
    Viewer.vue 预览内容

import Renderer from "./Renderer.vue";
import PropEditor from "./PropsEditor.vue";
import Viewer from './Viewer.vue';

class Control {
    constructor(props) {
        this.type = 'test';
        this.name = '测试组件';
        this.key = Date.now();
        this.id = this.type + "_" + this.key;
        this.lock = false;
        this.dataType = 'string';

        this.props = {
            type: 'test',
            width: 12,
            showLabel: true,
            labelWidth: undefined,
            label: '测试组件',
            enName: '', // 英文名称
            inputType: 'text', //类型
            defaultValue: '',
            placeholder: '',
            required: false,
            ...props
        };
        this.rules = [
            {message: '必填字段', required: !!props?.required}
        ]
    }
}

Control.type = "test";
Control.label = "测试组件";
Control.icon = "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF";
export default {Control, Renderer, PropEditor, Viewer};

<script setup>
    let props = defineProps({
    control: Object,
    formProps: Object,
    enData: Object
})

    function requiredChange(value) {
    props.control.rules[0].required = value;
}

    function requiredMessageChange(value) {
    props.control.rules[0].message = value;
}
</script>

<template>
    <el-form label-width="90px">
        <el-form-item label="中文名称">
            <el-input v-model="control.props.label" placeholder="请输入中文名称" :disabled="control.props.disabled"></el-input>
    </el-form-item>
    <el-form-item label="填写提示">
        <el-input v-model="control.props.placeholder" placeholder="请输入填写提示"></el-input>
    </el-form-item>
    <el-form-item label="描述信息">
        <el-input type="textarea" rows="5" v-model="control.props.remark" placeholder="请输入描述信息"></el-input>
    </el-form-item>
    <el-form-item label="是否必填">
        <el-switch @change="requiredChange" v-model="control.props.required"></el-switch>
</el-form-item>
<el-form-item label="必填提示" v-if="control.props.required">
    <el-input @change="requiredMessageChange" v-model="control.props.requiredMessage"></el-input>
</el-form-item>
</el-form>
</template>

<script setup>
defineProps({
    control: Object,
    model: Object,
})
</script>

<template>
  <el-radio-group v-if="model" v-model="model[control.id]" size="large">
    <el-radio-button label="New York" />
    <el-radio-button label="Washington" />
    <el-radio-button label="Los Angeles" />
    <el-radio-button label="Chicago" />
  </el-radio-group>
  <el-radio-group v-else v-model="control.props.defaultValue" size="large">
    <el-radio-button label="New York" />
    <el-radio-button label="Washington" />
    <el-radio-button label="Los Angeles" />
    <el-radio-button label="Chicago" />
  </el-radio-group>
</template>

<script setup>
defineProps({
    control: Object,
    model: Object,
})
</script>

<template>
    <div>{{ model[control.id] }} </div>
</template>

<div class="h-full w-full">
    <FormDesigner 
            :controlGroups="controlGroups"  
            :uploadOptions="uploadOptions" 
            :enData="enData" 
            :formData="data" 
            :customComponents="customComponents"
            @deleteItem="deleteItem" @copyItem="copyItem">
        <template #button>
            <el-button text type="primary" @click="releaseForm">
                <el-icon><NameIcon name="upload"/></el-icon>
                <span>发布</span>
            </el-button>
        </template>
        <template #action="{data}">
            <el-icon @click.stop="itemCustomButtonClick(data)">
                <NameIcon name="editor" style="color:#fff"></NameIcon>
            </el-icon>
        </template>
    </FormDesigner>
</div>

{
  "controls": [],
  "props": {
    "labelPosition": "right",
    "labelWidth": 100,
    "size": "default",
    "customClass": "",
    "cols": 12
  }
}

{
      "type": "select",
      "name": "下拉选择",
      "key": "qFahSi153",
      "id": "select_qFahSi153",
      "lock": false,
      "dataType": "string",
      "props": {
        "width": 12,
        "showLabel": true,
        "labelWidth": null,
        "label": "下拉选择",
        "defaultValue": "",
        "placeholder": "请选择",
        "required": false,
        "requiredMessage": "必填字段",
        "disabled": false,
        "clearable": true,
        "filterable": true,
        "customClass": "",
        "showOptionLabel": false,
        "options": [
          {
            "value": "值1",
            "label": "选项1"
          },
          {
            "value": "值2",
            "label": "选项2"
          }
        ]
      },
      "rules": [
        {
          "message": "必填字段",
          "required": false
        }
      ]
    }

import { reactive ,ref } from 'vue';
import { FormRenderer } from 'vue3-form-designer';
import "vue3-form-designer/dist/style.css";

let data = reactive({
    formData: {},
    formModel: {}
})
let formRenderer=ref(null);
//formData 来自 FormDesigner 组件，意义相同，用于构建表单结构
//formModel 为表单数据，应该来自后台数据，大概是这样：
/*
{
  "select_qFahSi153": "值1",
  "input_t6ciGfNlv": "12",
  "checkbox_la0CN3uuA": [
    "值1","值2"
  ]
}
*/

<FormRenderer
        ref="formRenderer"
        :formData="data.formData"
        :formModel="data.formModel"
    />