vue懒加载自定义指令

Vue的懒加载可以通过自定义指令来实现，以下是一个简单的示例：

// 自定义懒加载指令
Vue.directive('lazy', {
  inserted: function (el, binding) {
    let options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };
    
    // 创建一个 IntersectionObserver 实例
    let observer = new IntersectionObserver(function (entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 当元素进入可视区域时加载内容
          binding.value();
          observer.unobserve(entry.target); // 停止监听已经可见的元素
        }
      });
    }, options);
    
    // 开始观察元素
    observer.observe(el);
  }
});

然后，在需要懒加载的元素上使用 `v-lazy` 指令即可：

<template>
  <div>
    <img v-lazy="loadImage" src="placeholder.jpg" alt="Placeholder Image">
  </div>
</template>

<script>
export default {
  methods: {
    loadImage() {
      // 加载图片的逻辑
      // 这里可以使用`axios`或其他方式加载图片
      // 替换`src`属性以显示真实图片
    }
  }
}
</script>

在上面的示例中，当图片元素进入可视区域时，会调用 `loadImage` 方法来加载真实图片。你可以根据需要修改 `loadImage` 方法，以适应你的具体场景。