Vue 3 指令 - 如何将项目数组推送到指令

Question

由于 Vue 3 没有 IntersectionObserver 库，我想实现自己的小解决方案。

我阅读了有关指令的信息，据我了解，这是正确的方向。 (?)

我的本​​地指令：

directives: {
    'lazyload': {
      mounted(el) {
        if ('IntersectionObserver' in window) {        
          let intersectionObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                const lazyImage = entry.target;
                
                // set data-srcset as image srcset
                lazyImage.srcset = lazyImage.getAttribute('data-srcset');
                
                // add class after image has loaded
                lazyImage.addEventListener('load', () => {
                  lazyImage.classList.add('is-lazyloaded');
                };
                // unobserve after
                lazyLoadItemObserver.unobserve(lazyImage);
              }
            });
          });
          
          // observe every image
          const lazyLoadItems = document.querySelectorAll('[lazyload]')
          
          lazyLoadItems.forEach((lazyImage) => {
            lazyLoadItemObserver.observe(lazyImage);
          });
  
        }
      }
    }
  }

例如，普通的方法是从每个具有 attribute lazyload 的 <IMG> 元素中创建一个数组。我不明白的是如何从每个具有v-lazyload 绑定的<IMG> 中创建一个数组。

类似于“如果此图像具有 v-lazyload 绑定，则将其放入 IntersectionObserver 的数组中。”不过我可能理解错了。

所以我想提出一个指令，它设置一个 IntersectionObserver，它观察所有具有 v-lazyload 绑定的图像的数组。

Answer 1

v-lazyload 指令已经在目标元素上，因此无需查询文档。

在指令的mounted 钩子中，如果父节点不存在，您可以将IntersectionObserver 实例附加到父节点。然后，使用该实例来观察目标元素（同样不观察 unmounted 中的元素）：

directives: {
  mounted(el) {
    el.parentNode.lazyLoadItemObserver = el.parentNode.lazyLoadItemObserver || new IntersectionObserver(/*...*/)
    el.parentNode.lazyLoadItemObserver.observe(el)
  },
  unmounted(el) {
    el.parentNode.lazyLoadItemObserver.unobserve(el)
  },
}

demo