1.定义全局指令 directives/index.js // 定义懒加载插件 import { useIntersectionObserver } from '@vueuse/core' export const lazyPlugin = { install (app) { // 懒加载指令逻辑 app.directive('img-lazy', { mounted (el, binding) { // el: 指令绑定的那个元素 img // binding: binding.value 指令等于号后面绑定的表达式的值 图片url // console.log(el, binding.value) const { stop } = useIntersectionObserver( el, ([{ isIntersecting }]) => { console.log(isIntersecting) if (isIntersecting) { // 进入视口区域 el.src = binding.value stop() } }, ) } }) } } 2.引用该指令 -- main.js // 引入懒加载指令插件并且注册 import { lazyPlugin } from '@/directives' app.use(lazyPlugin) -- template 中 <img v-img-lazy="item.picture" alt="">
