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

描述

自定义指令 `v-resize`

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

监听窗口变化，元素大小发生变化，则会调用指令绑定的回调方法

此处需要考虑浏览器兼容性，部分老版本浏览器，无法兼容ResizeObserver，会导致报错崩溃

resizeWin是窗口变化的回调方法

使用

    <div v-resize="resizeWin">129391239</div>

代码

app.directive('resize', {mounted(el, binding) {if (window.ResizeObserver) {// Use ResizeObserver if availableconst resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {binding.value(entry);}});resizeObserver.observe(el);el._resizeObserver = resizeObserver;} else {// Fallback for browsers that do not support ResizeObserverconst handleResize = () => {binding.value({contentRect: el.getBoundingClientRect()});};window.addEventListener('resize', handleResize);el._resizeHandler = handleResize;handleResize();}},unmounted(el) {if (el._resizeObserver) {el._resizeObserver.disconnect();}if (el._resizeHandler) {window.removeEventListener('resize', el._resizeHandler);}}});