【Vue3】 vue3图片懒加载-封装自定义指令

<script lang="ts" setup>
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
const target = ref<HTMLImageElement | null>(null)
// stop停止监听
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log('执行了')
  console.log(isIntersecting)
  if (isIntersecting) {
    target.value!.src =
      'https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg'
    stop()
  }
})
</script>
<template>
  <div style="height: 3000px"></div>
  <img ref="target" alt="" />
</template>
<style scoed lang="less"></style>

import { App } from 'vue'
import Skeleton from './Skeleton/index.vue'
import Slider from './Slider/index.vue'
import More from './More/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app: App) {
    // 全局注册组件
    app.component('Skeleton', Skeleton)
    app.component('Slider', Slider)
    app.component('More', More)
    // 自定义指令
    // <img :src="item.src" alt="" />
    // <img v-lazy="item.src" alt="" />
    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        // 图片的懒加载逻辑
        // 参数1：回调函数
        // 参数2：可选的配置
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止监听
            stop()
            // 给el元素设置src属性
            // value = '123.jpg'
            el.src = value
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src =  defaultImg
            }
          }
        })
      }
    })
  }
}