resize-observer-polyfill的使用 vue监听页面元素变化

最新推荐文章于 2024-08-06 17:44:12 发布

ref_M

最新推荐文章于 2024-08-06 17:44:12 发布

阅读量2.3k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/M__O__M/article/details/129139582

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中安装并使用resize-observer-polyfill库来监听DOM元素的宽高变化。通过创建一个名为listenDomChange的函数，实现了对目标节点的尺寸变化进行节流处理的回调。在组件中，将这个功能应用到一个div元素上，当容器的高度变化时，会触发reSizeMap函数更新地图的宽高。

摘要由CSDN通过智能技术生成

1、安装resize-observer-polyfill

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

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

import ResizeObserver from 'resize-observer-polyfill'
/**
 * @description 监听dom的宽高变化
 * @param {ElementDom} targetNode 需监听的dom
 * @param {Function} throttleTime 监听的频率
 * @param {Number} callback 回调函数
 * @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、组件内使用

<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 监听容器宽高的变化
 */
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>