BI数据可视化 - 基于slot的定制化二次开发

[chiyan-lin]

No description provided.

[chiyan-lin]

前言

为什么要做这个

在常见的需求中，总有产品会来搞一些非常特殊的逻辑，这部分逻辑不常规，没办法进行配置抽象，这种不能抽象的逻辑使用BI配置平台实现很不合理，会搞脏我们的代码

还有部分情况是过滤器使用不符合原本的用户习惯，页面里面部分逻辑实现想通过业务自己的接口去做一些展示等等

于是想到一个解决方案，就是使用平台配置出来的报表，通过组件引用和slot注入的方式，支持业务逻辑特殊开发，slot 的内容可以精准替换报表里面特定的组件

[chiyan-lin]

实现的目标

1. 整个报表可以通过组件引入
2. 定制化的内容通过slot定点替换

<template>
  <BIDataRender>
    <!-- 123abd 是组件id -->
    <template #123abd={ item } >
      自定义组件
    </template>
  </BIDataRender>
</template>

<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'
import { BIDataRender } from '@bi'
</script>

实现难点

1. 如何实现有 slot 就替换，没有就使用原本的组件
2. 对于容器类型，有多级嵌套，slot 如何在递归渲染中传递
3. 全局数据的传递，slot 组件对数据的处理 如何设计
4. 组件如何打包，依赖项如何解决，宿主环境如何使用

[robbiemie]

wow! cool. I can give birth to calf for you.

[chiyan-lin]

slot 的应用

https://cn.vuejs.org/guide/components/slots#scoped-slots
看了下文档，slot 提供的功能已经算完全满足了

在子组件中, 只需要设置 name 这个 name 只要和外层的 slot 属性配对上上就可以平替，没有就使用原本的 renderitem 组件

<slot :name="item.id" :item="item">
    <RenderItem :data="data"></RenderItem>
</slot>

[chiyan-lin]

平台的组件如何给到宿主应用，宿主应用又怎么和原本的配置好的报表进行关联

宿主平台，也就是业务平台，在配置每个菜单的时候，需要配置当前这个菜单是关联的哪个报表id，这个是前置条件

二次开发 也就是业务平台会新建一个组件，用来关联这个菜单，本来可以用菜单id来作为组件名，但是为了命名规范，这里使用自定义的名字，也就是在配置菜单的时候需要配置多一个组件名，用来做关联

配置平台打包

使用上

1. 我们的理想使用方式是要像微前端那样的交互，但是又不希望引入过重的复杂度
2. 不需要像组件那样使用 npm 的方式安装，配置平台功能升级还需要业务平台发布

基于以上两点，其实 webpack5 的模块联邦是最好的解决方案，但是首先我们不能确保后续的业务都是webpack5，其次webpack5比较适合哪种组件类型的，我们相当于是一整个页面搞过来，所以决定自己来模拟模块联邦实现一个符合我们这个业务场景的打包模式

[chiyan-lin]

<template>
  <dashboardRender>
    <!-- template 后面放组件的唯一标识 -->
    <template #123abc="{ item }">
      i am slot
    </template>
  </dashboardRender>
</template>

<script setup lang="ts">
import {ref, computed, onMounted, watch} from 'vue'
import { dashboardRender } from './util'

</script>
<style lang="scss">

</style>

[chiyan-lin]