图片进入视口区域再去加载
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="" />
