手写v-lazy指令

<template>

<div v-for="item in arr" :key="item">

  <img v-lazy="item" alt="" width="400" height="800">

</div>

</template>

<script setup lang='ts'>

import type { Directive } from 'vue'

// import.meta.glob 为懒加载所有的图片相当于以下，作用是方便分包，不全部打包成一个文件

// let module = {

//  'xxx': () => import('xxx')

//}

// eager模式代表正常的import相当于以下，静态加载

// import "xxx" from 'xxx'

// 匹配对应路径下所有的文件名和文件格式

let imgList:Record<string, {default: string}> = import.meta.glob('/src/assets/img/*.*', {eager: true}) // 此时输出的格式是{'路径':Module{defaults:'路径'}}

let arr = Object.values(imgList).map(v => v.default) // 此时输出的是['路径',...]

const vLazy:Directive<HTMLImageElement,string> = async (el,binding) => {

  let def = await import('/src/assets/vue.svg')

  el.src = def.default // .default 才是路径

  const observer = new IntersectionObserver((enr) => { // IntersectionObserver是监听当前元素有没有出现在可视区,也可用在虚拟列表

    if (enr[0].intersectionRatio > 0) { // intersectionRatio是出现的比例，intersectionRatio>0代表已经出现在可视区

      //setTimeout(() => {

        el.src = binding.value // 出现则开始渲染正确的图片

        observer.unobserve(el) // 并且停止监听

      //}, 10000) // 用setTimeout看起来比较直观，否则很快

    }

  })

  observer.observe(el) // 监听每一个img元素

}

</script>

<style scoped lang='scss'>

</style>