vue3 ts 自定义指令实现图片懒加载

什么是图片懒加载

实现效果： 当鼠标滚动到可视区域时加载图片

实现方式：

使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为

步骤

新建一个自定义指令的文件夹 lazy.ts 即图片懒加载的组件(这么做是为了方便之后多个自定义指令的书写)

lazy.ts 图片懒加载自定义指令

import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/default.png'

export default function (app: App) {
  app.directive('lazy', {
    mounted(el: HTMLImageElement, binding) {
      /**
       *
       * @param {*} el 图片的dom对象
       * @param {*} binding.value 指令绑定的图片地址
       */
      const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
        // 图片进入可视区域
        if (isIntersecting) {
          el.src = binding.value
          // 关闭监控
          stop()
        }
        // 图片加载失败，显示默认图片
        el.onerror = () => {
          el.src = defaultImg
        }
      })
      console.log('执行了')
    }
  })
}

index.ts 引入并注册指令

import { App } from 'vue'
import registerLazy from './lazy'

const registerDirectives = (app: App) => {
  registerLazy(app)
}

export default registerDirectives

main.ts 引入自定义指令 并把app传过去

// 引入自定义指令
import registerDirectives from '@/directives/index'
registerDirectives(app)