实现图片进入视图窗口加载图片
1.利用vueuse插件
1.1安装vueuse插件
npm i @vueuse/core
1.2引入useIntersectionObserver //响应式监听目标元素的可见性。
具体详见useIntersectionObserver | VueUse中文文档
1.3创建组件方法
// 定义懒加载插件
import {useIntersectionObserver} from '@vueuse/core'
export const lazyPlugin = {
install (app) {
// 懒加载指令逻辑
app.directive('img-lazy', {
mounted (el, binding) {
// el: 指令绑定的那个元素
// binding: binding.value 指令等于号后面绑定的表达式的值
const {stop} = useIntersectionObserver(
el, ([{ isIntersecting }]) => {
console.log(el, binding.value);
if( isIntersecting) {
el.src = binding.value
stop()
}
}
)
}
})
}
}
1.4 在main.js引入组件方法
// 引入懒加载指令插件并注册
import {lazyPlugin} from '@/directives'
app.use(lazyPlugin)
1.4 在需要懒加载图片的img元素上引用
<li v-for="item in contentList" :key="item.id">
<RouterLink to="/">
<img v-img-lazy="item.picture" alt="" />
<p class="name">{{ item.name }}</p>
<p class="price">¥{{ item.price }}</p>
</RouterLink>
</li>