elpis - 动态组件扩展设计

在DSL里面我们通过schema配置,来实现页面字段和参数的配置,然后我们通过hook来实现解析配置的具体意义。配置如下

diff 复制代码
api:在Resuful规范下,增删改查都可以通过这个 配置生成
​
schema 字段是这个配置的核心,用于页面显示的数据和各种功能的配置和实现。
​
- tableOption 用于现实页面表结构的数据,
​
- tableConfig 用于表中不同行的配置和交互设置
- searchOption 用于设置 搜索栏设置是否显示
- searchConfig 用于搜索设置中的不同交互
​
​

本篇是在此基础上新增componentConfig。列如:

css 复制代码
componentConfig: {
    createForm: {
      title: '新建商品',
      saveBtnText: '新增商品', 
    },
    editForm: {
      mainKey: 'product_id',
      title: '修改商品',
      saveBtnText: '修改商品'
    },
    detailPanel: {
      mainKey: 'product_id',
      title: '商品详情',
    }
  } 

并在schema里面对于需要显示的字段下添加 componentConfig对应的key,列如

css 复制代码
schema: {
        type: 'object',
        properties: {
          product_id: {
            ...
            editFormOption: {
              comType: 'input',
              disabled: true,
            },
            detailPanelOption:{
              
            },
          },
        }

我们通过hook解析将配置的componentConfig配置,转换成对应组件所需要的数据components

在具体页面通过引入解析后的components数据,并将配置的的数据传入组件

ini 复制代码
   <component
            v-for="(item, key) in components"
            :key="key"
            :is="ComponentConfig[key]?.component"
            ref="comListRef"
            @command="onComponentCommand"
        ></component>

在通过统一的command 事件,在父组件里面集中处理,动态组件所需处理的事务。

相关推荐
Dontla4 分钟前
前端埋点(tracking)技术介绍(记录用户行为和页面性能数据)(埋点代码)ajax埋点、img埋点、navigator.sendBeacon埋点
前端·javascript·ajax
533_15 分钟前
[css] flex 布局设置文字不自动换行
前端·css
guojb82415 分钟前
元数据驱动:打造动态灵活的Vue键值对表格组件
前端·vue.js·element
学Linux的语莫17 分钟前
langchain输出解析器
java·前端·langchain
文心快码BaiduComate19 分钟前
您的前端开发智能工作流待升级,查收最新 Figma2Code!
前端·后端·程序员
狗头大军之江苏分军44 分钟前
当AI小智遇上股票:一个不写死代码的智能股票分析工具诞生记
前端·人工智能·python
范特东南西北风1 小时前
Vue 项目全局主题色实现经验分享
前端
trsoliu1 小时前
通用视口自动置底工具(createAutoScroller)技术指南(含完整源码)
前端
WY1 小时前
利用scp2和ssh2完成前端项目自动化部署解决方案 1.0
前端
ZJ_1 小时前
功能按钮权限控制(使用自定义指令控制权限)
前端·javascript·vue.js