vue2 封装一个自定义指令 在绑定自定义指令的DOM元素即将进入视口最底部时 执行事件

你可以使用 Intersection Observer API 来实现这个功能。Intersection Observer API 用于观察一个元素是否进入了视口，当元素进入或离开视口时，会触发相应的回调函数。

首先，你需要创建一个自定义指令，在 `bind` 钩子函数中创建一个 `IntersectionObserver` 实例，并观察绑定指令的元素。在回调函数中，可以判断目标元素是否进入了视口的底部，如果进入了，则执行相应的事件。

下面是一个简单的例子：

Vue.directive('bottom-in-view', {
  bind(el, binding) {
    const options = {
      root: null,
      threshold: 1.0 // 当元素完全进入视口时触发回调函数
    };

    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 判断元素是否进入了视口的底部
          if (entry.intersectionRatio === 1) {
            binding.value();
          }
        }
      });
    };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(el);
  }
});

使用示例：

<div v-bottom-in-view="handleBottomInView">...</div>

其中，`handleBottomInView` 是在元素进入视口底部时需要执行的事件函数。