elpis 一个企业级应用 —— 动态组件扩展设计

动态组件

回顾

elpis 一个企业级应用 —— DSL 框架设计理念DSL 介绍 DSL 指的是通过针对特定领域，设计出一套更加简洁， - 掘金

在之前的 DSl 框架设计中，我们介绍了如何通过一个单独的项目 DSL 文档去生成相应的页面功能，但由于在实际的开发中，我们需要的组件不仅仅只是原先配置的内容，还需要提供更多的功能组件来进行项目开发。

动态组件

动态组件使得页面中的一些组件功能可以通过预先的编写，使得后期实际搭建页面的时候，只需要配置相应的 DSL 文件中的内容就能够生成相应的功能模块。

实现原理

动态组件的实现原理与原先 Search | Table 等组件功能的实现原理类似，通过在 DSL 文档中配置相应的组件配置，然后在具体需要功能的页面配置相应的实现配置，从而生成相应的功能。

组件配置

 // 模块组件(组件配置)
            componentConfig: { 
                // create-form 表单相关配置
                createForm: {
                    title:'', // 表单标题
                    saveBtnText: '', // 保存按钮的文案
                },
                // edit-form 表单相关配置
                editForm: {
                    mainKey:'', // 表单主键，用于唯一标识要修改的数据对象
                    title:'', // 表单标题
                    saveBtnText:'', // 保存按钮
                },
                // detail-panel 相关配置
                detailPanel:{
                    mainKey:'',
                    title:''
                }
                // ...用户动态扩展其他组件
            },

实现配置

createFormOption: {
        ...elComponentConfig, // 标准 el-conponent 配置
        comType: '', // 控件类型 input | select | input-number
        visible: true, // 是否展示 (true/false), 默认为 true
        disable: false, // 是否禁用 (true/false)，默认 false
        default: '', // 默认值

        // comType == select
        enumList: [], // 枚举列表
    },

总结

总的来说，动态组件为项目的开发进行补充，使得开发者能够配置更多的模块，大大提升了 DSl 框架的可拓展性。