基于Vue3封装布局组件

背景

由于目前业务需求中存在很多图表+表格等类型的页面，传统开发中需要一个一个组件的写好，再手动调整css，既耗费了时间又不能统一的控制加载、联动等逻辑。

本布局组件既是解决以上问题而诞生的。

支持的功能

由于项目是基于IDux组件库开发的，所以这里会使用其中的一些组件来实现

布局

通过IxRow及IxCol实现子组件的行列布局，通过简单的配置即可实现页面的自适应布局。

同时，每行每列都内置了IxsTitleContainer组件，可方便的实现标题的显示。

注册

通过以下简单的配置，对每列配置好key，就会将子组件注册到布局组件中，后续可统一控制事件。

const rows: LayoutRow[] = [
  {
    flexHeight: '200px',
    cols: [
      {
        key: 'box1',
        flexWidth: '340px',
        titleContainerProps: {
          title: '网络趋势',
        },
        componentProps: {
          type: 'pie',
        },
      },
      {
        key: 'box2',
        titleContainerProps: {
          title: '网络流向',
        },
        componentProps: {
          type: 'pie',
        },
      },
    ],
  },
];

行超出滚动

存在一行中有多个图表，超出了屏幕的场景。

布局组件内置了IxsRotations组件，开启即可自动在超出时显示切换按钮，轻松实现切换效果。

图表

由于页面存在很多图表，一个个单独写vue文件代码很麻烦。

布局组件内置了IxsCharts组件，在配置中不传组件的话就会自动使用内置图表组件，通过简单的配置图表数据转换即可将图表显示出来。

监听容器resize事件

当页面尺寸发生变化时，会自动触发子组件注册的resize方法，更新组件样式。

请求

布局组件支持用户手动传入fetch进行数据请求，同时也支持只传一个url，即可自动根据配置的key生成每个子组件的fetch函数，在需要的时机调用并设置数据。

同时考虑到数据量大的场景，支持对请求进行分组，通过并发请求的形式优化加载速度。

自定义工具栏

内置了IxsToolbar，简单配置即可显示出工具栏，同时内置了自动刷新、时间选择器等工具栏。

工具栏还支持对子组件事件的统一处理

loading效果

由于loading是要在每个子组件的区域单独显示，所以布局组件内置了loading效果，只需要子组件向布局组件提供容器的ref即可自动显示loading效果。

事件系统

子组件及布局组件中存在相互联动，所以布局组件内置了一套事件系统，通过获取事件实例就可实现事件的监听及触发，轻松实现联动。

与左树的联动

通常页面会存在左树，布局组件内部监听了左树选中值的变化，触发变化即会自动更新内部组件数据。

总结

通过支持以上功能，可以快速的开发页面。同时保证了开发的规范、事件的处理流向等。

目前已稳定支持多个项目，10+个页面的开发