拖拽表单开发原理

拖拽表单实现的原理

拖拽表单实现起来原理其实还是比较简单的，主要分为两个环节。

1.定义表单数据的定义json，然后实现拖拽生成修改json。

2.解析json渲染出表单

接下来我们接以系统中的代码为例，讲解其中的关键。

其中有一个关键的标签，为vue提供的component标签，可以实现动态导入组件，如果不了解建议百度或者看下这个https://v2.cn.vuejs.org/v2/api/#component

表单组件结构数据定义

src/views/formgen/components/GenerateForm/config.ts:30

image-20231111211122699、

这里我们就定义好了表单组件的一些核心属性，比如标题，组件的名称，宽度等等。

循环1定义的好的表单组件数据数组，然后会生成一个可以拖拽的组件列表，拖拽到设计器区域的时候，会保存到后端。给组件加可配置属性就是修改定义好的json结构

image-20231111211251924

src/views/formgen/components/FormDesign/FormItemConfig.vue:202 表单组件配置

image-20231111211534806

该组件内是定义的通用的配置，比如组件的标题这些通用的设置等等，然后通过compoent标签实现动态导入对应组件的设置。导入规则如下。

在src/views/formgen/components/FormDesign/ItemConfig 目录下创建一个配置.vue 名称随意，但是vue文件中需要对外导出name，规则为定义的Config+ json中的typeId

转为大写驼峰，比如子表单组件ConfigItemSubForm

<script>
export default {
  name: "ConfigItemSubForm",
  props: ["activeData"]
};
</script>

image-20231111211633957

这里编辑器的设计就大致结束了。然后是如何渲染出来，当然还是循环，刚才我们已经定义了表单组件的json，经过拖拽多个组件，会有一个定义的组件数组。

然后我们还是通过component 标签实现

image-20231111212018136

我们根据定义的json中的tag动态导入相关的表单，然后把定义的组件属性传递到里面，里面通过props接收，然后通过emit 修改值。

image-20231111212358862

然后通过emit就修改表单的值

image-20231111212447875

然后就结束了。