当前位置：首页 > article >正文

【10分钟学习Vue自定义指令开发】元素变化指令

article 2024/11/22 6:28:04

描述

自定义指令 `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 available
        const 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 ResizeObserver
        const 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);
      }
    }
  });