组件结构

轻码猿2024年1月9日大约 2 分钟

表单组件开发

设计器说明

描述

组件列表：组件列表数据会通过/dist/config/form.json中解析配置
组件渲染区域：从组件列表拖入组件渲染区域进行渲染
组件配置区域：当选中对应表单组件后会显示该组件对应的配置
表单预览：当需要预览表单时，点击右上角预览可查看PC端、移动端预览效果，点击提交和暂存可以在控制台查看表单数据。

创建组件

在创建组件时只需要根据组件结构规范新建组件即可，这里已 Demo 组件为例进行演示，当我们创建完pc、mobile、sub、config.json后，结构如下：

   |-- Demo	// 演示demo
       |-- config.json	// 组件配置（必须）
       |-- index.js	// 组件导出（必须）
       |-- mobile					
       |   |-- index.vue		
       |-- pc							
       |   |-- index.vue
       |-- sub	// 子表单组件 
           |-- index.vue

在index.js中导出：

import PC from "./pc/index.vue";
import Mobile from "./mobile/index.vue";
import Sub from "./sub/index.vue"
import {
    version,
    compatibleSdkVersion
} from "./config.json";
export default {
    PC,
    Sub,
    Mobile,
    version,
    compatibleSdkVersion,
};

通过 npm start 启动项目后会发现 /dist/components/form/ 中新增了Demo组件，包含一个js和一个config.json，这些都是在上传的时候必要的文件。

由于采用的umd的方式打包，会将资源和组件打成一个js文件。打包后的组件就会已 DESIGN<@>${name} 这样的格式注入到 window 全局中。

组件Props属性

设计器在渲染组件时会项组件中传入部分数据供开发者使用。

属性	类型	说明	设计器版本
components	Array<Object>	页面组件配置信息列表，具体格式可以查看config.json说明	1.0.0
data	Object	组件的用户配置信息，在编辑组件时，右侧配置栏中的配置都可以在这里获取	1.0.0
fieldName	String	组件字段，在提交表单是会以此字段为key提交数据	1.0.0
formList	Array<FormComponentOption>	组件用户配置列表，包含了部分组件信息以及用户组件配置	1.0.0
formValue	Object	所有表单绑定值	1.0.0
modelValue(v-model)	*	当前表单组件绑定值	1.0.0
isEdit	Boolean	当前表单渲染环境，true表示正在编辑中，false表示在预览模式	1.0.0
selectedComponent	Array<String>	选中的表单组件id（仅在设计模式时使用）

FormComponentOption

属性	类型	说明	设计器版本
field	String	组件字段，在提交表单是会以此字段为key提交数据，与组件props.fieldName相同	1.0.0
formData	Object	当前组件用户配置	1.0.0
id	String	组件唯一标识，每次拖入一个组件随机生成，不会重复

这些属性是自动注入的，其他还有部分属性与config.json说明中的一致。

当组件开发完成后需要打成压缩包进行上传，具体上传步骤请看组件上传