鼠标控制dom元素的大小。采用ResizeObserver——监听元素大小的变化

ResizeObserver是浏览器提供的API，用于替代window.resize事件监听元素尺寸变化，避免性能问题。它能精确观察到Element内容区域或SVGElement边框的变化。在示例中展示了如何在Vue应用中使用ResizeObserver监听div元素的尺寸，并实时更新其内容。同时，需要注意CSS的resize属性需设置为hidden以使功能生效。

这段代码的目的是使用 ResizeObserver 监听一个目标元素的大小变化，并根据目标元素的新尺寸调整 Cesium 画布 (canvas) 的大小。以下是代码的详细解释：

创建 ResizeObserver 实例 

 const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const target = entry.target;
        const width = target.clientWidth;
        const height = target.clientHeight;
        const cesiumCanvas = document.querySelector(
          `#${this.cesiumContainer} canvas`
        );
        // 设置 Cesium 画布的大小
        cesiumCanvas.style.width = width + "px";
        cesiumCanvas.style.height = height + "px";
      }
    });

 

• ResizeObserver 是一个用于观察元素尺寸变化的 API。
• 回调函数接收一个 entries 数组，每个 entry 代表一个被观察的目标元素及其变化。
• entry.target 是发生变化的元素，clientWidth 和 clientHeight 提供该元素的当前宽度和高度。
• document.querySelector 用于选择特定的 canvas 元素，并更新其 style 属性来设置宽度和高度，使其匹配目标元素的尺寸。

选择目标元素并开始观察 

    // 监听的目标元素
    const targetElement = document.getElementById(this.cesiumContainer);
    resizeObserver.observe(targetElement);

• document.getElementById 根据 this.cesiumContainer 变量的值（应该是一个字符串）选择目标元素。
• resizeObserver.observe(targetElement) 开始观察目标元素的大小变化。

补充：

ResizeObserver.disconnect()

取消特定观察者目标上所有对 Element 的监听。

ResizeObserver.observe()

开始对指定 Element 的监听。

ResizeObserver.unobserve()

结束对指定 Element 的监听。