开发新的元素

[xinglie]

如果report-desinger自带的元素不能满足需求，则需要开发新的符合业务的元素

确认元素类型

首先在tmpl/elements目录下为新元素建立自己的文件夹

在文件夹里需要放上desinger.ts和index.ts两个文件，其中desinger.ts是为设计器服务的，index.ts用于展示

如果元素过于复杂，也可以新增一个dshow.ts文件，专门用于设计器中交互和展示

根据元素的功能确认类型，如展示型的，像设计器自带的文本、图片、二维码等元素。交互型的如地图、富文本等，还是带数据绑定的，如单元格，还是带容器类型的，如数据表格、H-Flex等。

report-designer提供了5大类型的元素基类供继承，在这一步根据元素的类型来决定使用哪一个基类来继承即可

填充元素功能

在desinger.ts文件里，需要填充上如名称、类型、图标、是否支持拖动修改尺寸、旋转等供设计器使用的属性。

同时需要提供元素自身有哪些属性，以及这些属性在面板中如何被修改

比如元素有一个数量属性，需要使用数字组件来修改它，且最小为2最大为50，则只需要对这个属性使用数字组件来配置，把相应的大小范围等做一个配置即可完成。

设计器提供了如数字、下拉框、颜色、图片等多达40余种属性修改组件来供配置

这一步只需要仿照其它组件进行配置即可，无任何开发工作，至此一个元素就开发完成

高级进阶

只有复杂的元素才需要这一步，根据需求的不同，会稍有代码开发的工作

如果元素本身非常复杂，且属性也无法使用设计器提供的常见组件来修改，则需要开发修改元素属性的组件。

首先在tmpl/gallery目录下增加用于修改元素属性的组件

其次在tmpl/panels/props/element.ts文件里，进行新增组件的注册，完成后新增的组件即可正常工作

如果元素设计器自身在设计器中接收其它操作，如拖放数据、数据推送等，则可仿照其它带有该功能的元素，如数据表格进行开发。

其实这一步和开发普通组件没有任何区别，设计器无非就是把部分属性进行可视化展示和设置。

导出

新开发好的元素在tmpl/elements/index.ts文件中进行导出即可展示在设计器里进行使用了。