【分享一个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 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);
      }
    }
  });

拓展

【10分钟学习Vue自定义指令开发】复制指令v-copy

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

【10分钟学习Vue自定义指令开发】鼠标放置提示指令

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值