直接上代码

批量注册组件 需在main.js中导入

--自定义指令图片懒加载

<img v-lazy="xxxxx" alt />

import defaultImg from '@/assets/images/200.png'
const requireComponent = require.context('./libary', true, /\.vue$/)

export default {
  install (Vue) {
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      Vue.component(defaultObj.name, defaultObj)
    })

    // 注册图片懒加载自定义指令
    Vue.directive('lazy', {
      // Vue2
      // inserted (el, binding) {}
      // Vue3
      mounted (el, binding) {
        const observer = new IntersectionObserver(
        // console.log(observer)
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // console.log(el, binding, 111)
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 关闭监听dom
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 监听dom
        observer.observe(el)
      }

    })
  }
}

数据懒加载的封装

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export const useLazyData = (fn) => {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // dom
    target,
    // 监听的回调函数
    ([{ isIntersecting }], observerElement) => {
      console.log(isIntersecting, 222222)
      if (isIntersecting) {
        stop()
        // 获取数据
        // getNew()
        // if (fn) {
        //   fn()
        // }
        fn && fn()
      }
    }
  )

  return target
}

使用