Vue 3 项目里通过自定义指令实现图片懒加载
本文只说明代码如何实现，例如自定义指令、插件的基础知识请移步Vue官方文档。
说明：useIntersectionObserver 是VueUse里面用于检测目标元素是否在可视区域的一个函数。
安装VueUse
npm i @vueuse/coresrc/directive/index.js
import { useIntersectionObserver } from "@vueuse/core"
export const lazyDirective = {
install(app) {
app.directive('lazy', (el, binding) => {
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
// 图片进入可视区域
if (isIntersecting) {
el.src = binding.value
stop() // 只需观察一次元素，避免重复观察
}
})
})
}
}main.js
import { lazyDirective } from './directive'
app.use(lazyDirective)注：本文使用了Vue中自定义指令和插件结合的方法实现