在vue3中封装一个自定义图片懒加载指令

1.在全局组件中下载并引入@vueuse/core函数库

yarn add  @vueuse/core  //下载安装包
import {useIntersectionObserver} from '@vueuse/core'

 2.在全局组件中添加自定义指令

   图片懒加载参考vueuse官网useIntersectionObserver | VueUse
   自定义指令参考vue3官网自定义指令 | Vue.js

import {useIntersectionObserver} from '@vueuse/core' // 下载并引用@vueuse函数库
import {App} from 'vue'
export default {
   install(app:App){
   app.directive('lazy',{
     mounted(el,binding){  //vue3的写法
       const {stop} =useIntersectionObserver(el,([{isIntersecting }])=>{
       //当图片进入可视区之后isIntersecting为true反之为false 
        if(isIntersecting){  
           el.src = binding.value
           stop()  //停止监听,避免重复获取图片
         }
       })
      }
    })
  }
}

3.在组件中使用

  //使用指令前
            ↓↓
 //使用指令后