vue3自定义指令懒加载

Vue 3 中的自定义指令是可以用来实现懒加载的。

要使用自定义指令来实现懒加载，你需要进行以下步骤：

1. 在项目中安装 IntersectionObserver 库。它可以帮助你监听元素是否进入可视区域。

npm install intersection-observer

2. 在你的 Vue 项目中创建一个自定义指令。在这个指令中，你可以使用 IntersectionObserver 来监听元素的可视化状态。

import { DirectiveOptions } from 'vue'
import IntersectionObserver from 'intersection-observer'

const LazyLoad: DirectiveOptions = {
  bind(el, binding, vnode) {
    const observer = new IntersectionObserver((entries) => {
      // 当元素进入可视区域时，加载图片
      if (entries[0].isIntersecting) {
        const imgElement = vnode.elm as HTMLImageElement
        imgElement.src = binding.value
        observer.disconnect()
      }
    })
    observer.observe(el)
  }
}

export default LazyLoad

3. 在你的 Vue 组件中使用这个自定义指令。

<template>
  <img v-lazy-load="imgUrl" />
</template>

<script>
import LazyLoad from './LazyLoad'

export default {
  directives: {
    LazyLoad
  }
}
</script>

在这个例子中，当 `<img>` 元素进入可视区域时，它的 `src` 属性会被设置为 `imgUrl`，这样图片就会被加载。

希望这对你有帮助！