26 lines
726 B
JavaScript
26 lines
726 B
JavaScript
|
// 定义懒加载插件
|
||
|
|
import { useIntersectionObserver } from '@vueuse/core'
|
||
|
|
|
||
|
|
export const lazyPlugin = {
|
||
|
|
install (app) {
|
||
|
|
// 懒加载指令逻辑
|
||
|
|
app.directive('img-lazy', {
|
||
|
|
mounted (el, binding) {
|
||
|
|
// el: 指令绑定的那个元素 img
|
||
|
|
// binding: binding.value 指令等于号后面绑定的表达式的值 图片url
|
||
|
|
// console.log(el, binding.value)
|
||
|
|
const { stop } = useIntersectionObserver(
|
||
|
|
el,
|
||
|
|
([{ isIntersecting }]) => {
|
||
|
|
console.log(isIntersecting)
|
||
|
|
if (isIntersecting) {
|
||
|
|
// 进入视口区域
|
||
|
|
el.src = binding.value
|
||
|
|
stop()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|