Vue3图片懒加载封装自定义指令

图片进入视口区域再去加载

1. 创建自定义指令文件夹

首先，创建一个新的文件夹来存放你的自定义指令，例如 directives。在这个文件夹中，你可以创建以下文件：

• index.js：入口文件。
• img/imgLazy.js：自定义指令的实现文件。

2. 实现自定义指令

在 imgLazy.js 中，实现你的自定义指令：

// img/imgLazy.js
//需要使用vueuse的useIntersectionObserver 方法,下载vueuse--npm install @vueuse/core
import { useIntersectionObserver } from '@vueuse/core'
export const imgLazy = {
  mounted(el, binding) {
  // el: 指令绑定的那个元素 img
 // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        console.log(isIntersecting);
        if (isIntersecting) {
          el.src = binding.value
          // 进入视口区域
          stop()
        }
      }
    )
  }
}

3. 导出指令

在 index.js 中，导入你的自定义指令：

// /index.js
import { imgLazy } from "./img/imgLazy";
export const lazyPlugin = {
  install(app) {
  // 注册全局自定义指令
    app.directive('img-lazy',imgLazy)
  }
};

4. 使用

在项目主文件中导入并使用：

import { createApp } from 'vue';
//引入懒加载指令插件并且注册
import { lazyPlugin } from '@/directives'

const app = createApp(App);

app.use(lazyPlugin)

app.mount('#app');

 <img v-img-lazy="item.picture" alt="" />