共计 405 个字符，预计需要花费 2 分钟才能阅读完成。
外围代码
import {useIntersectionObserver} from "@vueuse/core";
// 图片懒加载
export const lazyPlugin = {install(app) {
// 自定义指令：app.directive("img-lazy", {mounted(el, binding) {const { stop} = useIntersectionObserver(
el,
([{isIntersecting}], observerElement) => {if (isIntersecting) {
// 图片进入视觉入口了
el.src = binding.value;
stop();}
}
);
},
});
},
};应用
<img v-img-lazy="baseUrl + item.url" alt="":key="item.url" />要点：
** 肯定要加上:key, 不然会呈现在更新数据源的时候，数据更新图片被缓存不更新的状况 **
正文完
