组件扩展

1、组件扩展流程

- 1、掌握框架组件扩展的实现机制 想要开发一个扩展组件，首先要了解mdf框架对扩展组件的实现机制： 上述代码就是从领域的前端工程，向框架注册扩展组件的入口，registerComponents方法提供了两个参数，参数一为所在领域的前端domainKey，做隔离使用，参数二为扩展组件的Map。 框架在加载时，会根据返回的UI元数据进行解析，优先从领域注册的扩展中获取容器/组件，扩展中未注册的则默认解析为框架的容器/组件。

- 2、掌握扩展的组件类型，将组件编写到对应的目录结构下 目录与扩展对照

- 3、扩展完成，注册组件

在对应目录下的index.jsx文件中导出会自动进行注册

    export InputNumber from './InputNumber';

- 4、扩展完成，在控制台验证组件是否已经注册到框架中

    cb.extend.Components[domainKey]

- 5、检查注册到框架中后，使用扩展的组件以及本地调试 基本类型组件使用： 方法一：在UI模板设计器上配置类型为InputNumber的字段，如下： 方法二：在设计器，打开编辑器，修改cControlType的值 表格类型组件使用： 表格内自定义列使用方法，需要先获取表格的girdModel对象，然后调用表格设置列状态方法setColumnState()，实现自定义列展示扩展组件

    let gridModelinfo = viewModel.getGridModel();
    //设置表格数据后事件  data为grid数据格式
    gridModelinfo.on("afterSetDataSource", function (data) {
              // args0:列名   args1:'formatter'固定写死  args2:回调
             gridModelinfo.setColumnState('new1','formatter',function(rowInfo,                   rowData) {
                        let percent = rowData.new1;
                        return {
                            // 注册的扩展组件名称
                            formatterKey: 'MyProgress',
                            // 传入扩展组件内部的数据
                            props: {
                                percent,
                                rowInfo,
                                rowData,
                                status: 'success',
                                showInfo: true
                            }
                       }
             })
      });

模态框组件使用： 使用communicationAPI触发使用

     viewModel.get('button24qh').on('click', function (args) {
             const rowData = gridModelinfo.getRow(args.index);
             //触发弹窗
             viewModel.communication({
                   //模态框类型-固定写死
                   type: "modal",
                    payload: {
                         //扩展的组件名
                         key: "ForceDown",
                         data: {
                       //把模型传递给组件内部，用于组件和MDF模型关联使用（比如组件内发布事件，把组件内的值传到MDF模型中）
                        viewModel: viewModel,
                  //传递给组件内部的数据（组件内部通过 this.props.myParam获取）
                       myParam: {
                                    title: "弹窗示例之扩展弹窗",
                                    billLink: rowData.new5 || ''
                                }
                         }
                   }
             })
   })

- 6、调试完成后，上传代码，执行流水线

2、案列分享

1、基础类型组件扩展：基础组件扩展地址 2、表格类组件扩展：表格组件扩展地址 3、模态框类组件扩展：模态框类组件扩展地址