引用于https://blog.csdn.net/M__O__M/article/details/129139582

1、安裝resize-observer-polyfill

npm install resize-observer-polyfill --save-dev

2、在utils文件夾下的index.ts引入使用

import ResizeObserver from 'resize-observer-polyfill'
/**
 * @description 監(jiān)聽(tīng)dom的寬高變化
 * @param {ElementDom} targetNode 需監(jiān)聽(tīng)的dom
 * @param {Function} throttleTime 監(jiān)聽(tīng)的頻率
 * @param {Number} callback 回調(diào)函數(shù)
 * @returns resizeObserver
 */
export const listenDomChange = function (targetNode: Element, callback: any, throttleTime = 300) {
  const _callback = throttle(callback, throttleTime)
  const observer = new ResizeObserver(_callback)
  observer.observe(targetNode)
  return observer
}

3、組件內(nèi)使用

<template>
  <div class="mapContainer container" ref="mapContainer">高度變化</div>
</template>
<script lang="ts" setup>
import { listenDomChange } from '@/utils'
 
const mapContainer = shallowRef<HTMLDivElement | null>(null)
onMounted(function () {
  listenMapChange()
})
 
/**
 * @description 監(jiān)聽(tīng)容器寬高的變化
 */
const listenMapChange = function () {
  const targetNode = mapContainer.value
  // 觀察器的配置
  listenDomChange(targetNode!, () => {
    reSizeMap()
  })
}
/**
 * @description 更新地圖的寬高
 */
const reSizeMap = () => {
  console.log('高度變化', mapContainer.value?.clientHeight)
}
 
</script>
<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  height: calc(100vh - 80px);
  position: relative;
  z-index: 10;
}
</style>