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 事件,在父组件里面集中处理,动态组件所需处理的事务。

相关推荐
蒋星熠10 分钟前
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
前端·vue.js·人工智能·pytorch·深度学习·ai·typescript
狂炫一碗大米饭15 分钟前
JavaScript 中 Fetch API 的完整指南
前端·api
coding随想20 分钟前
还没用过就要被弃用了?深度解析浏览器中的App Cache缓存管理事件
前端
Flyfreelylss39 分钟前
前端实现解析【导入】数据后调用批量处理接口
前端·reactjs
小彭努力中42 分钟前
164.在 Vue3 中使用 OpenLayers 加载 Esri 地图(多种形式)
开发语言·前端·javascript·vue.js·arcgis
布里渊区1 小时前
前端页面性能优化
前端·性能优化
浩星1 小时前
react+taro中使用vant 工具:taroify
前端·react.js·taro
浩星1 小时前
react+taro的使用整理
前端·react.js·taro
IT_陈寒1 小时前
7个Vue 3.4新特性实战心得:从Composition到性能优化全解析
前端·人工智能·后端
@HNUSTer1 小时前
基于 HTML、CSS 和 JavaScript 的智能图像锐化系统
开发语言·前端·javascript·css·html