手把手搭建vue前后端管理系统-三步实现模块监听及自动调整大小和布局（十六）

目标：本次要实现的效果为，不管右侧如何拖动，左侧的图表的大小会随之进行调整。

只需要三步就能实现：1、创建观察者；2、定义监听回调；3、定义观察的目标对象；

一、创建观察者：

const observer=ref([])  //初始化监听页面布局的数据，用于动态调整图表的布局

二、定义监听回调

注：其中的oneEchart就是前章的折线图、twoEchart就是柱状图、threeEchart就是饼图。

//ResizeObserver API 可用于监视一个 DOM 的尺寸信息变化。可以是 宽高、位置 信息的变化：
//1、创建观察者；2、定义监听回调；3、定义观察的目标对象；4、取消观察
//如果监听的容器大小发生了变化，改变了之后，会执行回调函数
observer.value= new ResizeObserver(()=>{
    oneEchart.resize()
    twoEchart.resize()
    threeEchart.resize()
})

三、定义观察的目标对象：

//监听页面的变化：如果容器存在,则定义观察的目标对象，主要的语法为：
//resizeObserver.observe(container); 
if(proxy.$refs['echart']){ observer.value.observe(proxy.$refs['echart']) }

注：ResizeObserver API 可用于监视一个 DOM 的尺寸信息变化。可以是 宽高、位置 信息的变化：1、创建观察者；2、定义监听回调；3、定义观察的目标对象；4、取消观察

是不是很简单就能实现了，这样不管页面怎么变化，图标的大小都是保持一个正常的符合大众审美的形状来进行展现，十分的实用！