Vue图片懒加载

安装 vueuse 插件

npm i @vueuse/cindex.php/tags-1038.html" >ore

搜索 useIntersectionObserver 方法

import { ref } from 'vue'import { useIntersectionObserver } from '@vueuse/core' export default {  setup() {    const target = ref(null)    const targetIsVisible = ref(false)     const { stop } = useIntersectionObserver(      target,      ([{ isIntersecting }], observerElement) => {        targetIsVisible.value = isIntersecting      },    )     return {      target,      targetIsVisible,    }  },}

使用：

main.js：

1、引入方法

// 用来图片懒加载import { useIntersectionObserver } from "@vueuse/core";

2、提前配置好 自定义指令

// 全局指令app.directive("img-lazy", {  mounted(el, binding) {    console.log(el, binding.value);    const { stop } = useIntersectionObserver(      el,      ([{ isIntersecting }], observerElement) => {        console.log(isIntersecting);        if (isIntersecting) {          el.src = binding.value;          stop()     //避免性能浪费，视口可见后不再监听        }      }    );  },});

html部分：