【分享一个vue指令】元素变化指令v-resize

原创

已于 2024-11-22 14:59:45 修改 · 629 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-11-21 10:38:09 首次发布

描述

mounted(el, binding)：当元素被挂载到DOM上时，这个钩子会被调用。
- 如果浏览器支持 ResizeObserver，则创建一个 ResizeObserver 实例来监听元素的大小变化。当变化发生时，它会遍历所有的变化条目，并调用绑定的回调函数 binding.value，将变化的详情作为参数传递。
- 如果浏览器不支持 ResizeObserver，则使用一个回退方案。创建一个 handleResize 函数，当窗口大小变化时，这个函数会被调用，并使用 getBoundingClientRect 方法获取元素的新大小，然后将这个信息传递给绑定的回调函数。同时，将这个函数绑定到 window 对象的 resize 事件上，并立即执行一次以获取初始大小。
- 为了能够在元素卸载时取消监听，将 ResizeObserver 实例和 handleResize 函数分别存储在元素的 _resizeObserver 和 _resizeHandler 属性中。
unmounted(el)：当元素被卸载时，这个钩子会被调用。
- 如果元素有 _resizeObserver 属性，即浏览器支持 Re