Closed xinglie closed 7 months ago
如果report-desinger自带的元素不能满足需求,则需要开发新的符合业务的元素
report-desinger
首先在tmpl/elements目录下为新元素建立自己的文件夹
tmpl/elements
在文件夹里需要放上desinger.ts和index.ts两个文件,其中desinger.ts是为设计器服务的,index.ts用于展示
desinger.ts
index.ts
如果元素过于复杂,也可以新增一个dshow.ts文件,专门用于设计器中交互和展示
dshow.ts
根据元素的功能确认类型,如展示型的,像设计器自带的文本、图片、二维码等元素。交互型的如地图、富文本等,还是带数据绑定的,如单元格,还是带容器类型的,如数据表格、H-Flex等。
report-designer提供了5大类型的元素基类供继承,在这一步根据元素的类型来决定使用哪一个基类来继承即可
report-designer
5
在desinger.ts文件里,需要填充上如名称、类型、图标、是否支持拖动修改尺寸、旋转等供设计器使用的属性。
同时需要提供元素自身有哪些属性,以及这些属性在面板中如何被修改
比如元素有一个数量属性,需要使用数字组件来修改它,且最小为2最大为50,则只需要对这个属性使用数字组件来配置,把相应的大小范围等做一个配置即可完成。
数量
数字
2
50
设计器提供了如数字、下拉框、颜色、图片等多达40余种属性修改组件来供配置
下拉框
颜色
图片
40
这一步只需要仿照其它组件进行配置即可,无任何开发工作,至此一个元素就开发完成
只有复杂的元素才需要这一步,根据需求的不同,会稍有代码开发的工作
如果元素本身非常复杂,且属性也无法使用设计器提供的常见组件来修改,则需要开发修改元素属性的组件。
首先在tmpl/gallery目录下增加用于修改元素属性的组件
tmpl/gallery
其次在tmpl/panels/props/element.ts文件里,进行新增组件的注册,完成后新增的组件即可正常工作
tmpl/panels/props/element.ts
如果元素设计器自身在设计器中接收其它操作,如拖放数据、数据推送等,则可仿照其它带有该功能的元素,如数据表格进行开发。
数据表格
其实这一步和开发普通组件没有任何区别,设计器无非就是把部分属性进行可视化展示和设置。
新开发好的元素在tmpl/elements/index.ts文件中进行导出即可展示在设计器里进行使用了。
tmpl/elements/index.ts
确认元素类型
首先在
tmpl/elements
目录下为新元素建立自己的文件夹在文件夹里需要放上
desinger.ts
和index.ts
两个文件,其中desinger.ts
是为设计器服务的,index.ts
用于展示根据元素的功能确认类型,如展示型的,像设计器自带的文本、图片、二维码等元素。交互型的如地图、富文本等,还是带数据绑定的,如单元格,还是带容器类型的,如数据表格、H-Flex等。
report-designer
提供了5
大类型的元素基类供继承,在这一步根据元素的类型来决定使用哪一个基类来继承即可填充元素功能
在
desinger.ts
文件里,需要填充上如名称、类型、图标、是否支持拖动修改尺寸、旋转等供设计器使用的属性。同时需要提供元素自身有哪些属性,以及这些属性在面板中如何被修改
比如元素有一个
数量
属性,需要使用数字
组件来修改它,且最小为2
最大为50
,则只需要对这个属性使用数字
组件来配置,把相应的大小范围等做一个配置即可完成。设计器提供了如
数字
、下拉框
、颜色
、图片
等多达40
余种属性修改组件来供配置这一步只需要仿照其它组件进行配置即可,无任何开发工作,至此一个元素就开发完成
高级进阶
如果元素本身非常复杂,且属性也无法使用设计器提供的常见组件来修改,则需要开发修改元素属性的组件。
首先在
tmpl/gallery
目录下增加用于修改元素属性的组件其次在
tmpl/panels/props/element.ts
文件里,进行新增组件的注册,完成后新增的组件即可正常工作如果元素设计器自身在设计器中接收其它操作,如拖放数据、数据推送等,则可仿照其它带有该功能的元素,如
数据表格
进行开发。其实这一步和开发普通组件没有任何区别,设计器无非就是把部分属性进行可视化展示和设置。
导出
新开发好的元素在
tmpl/elements/index.ts
文件中进行导出即可展示在设计器里进行使用了。