vue3自定义指令--图片懒加载

<template>
    <div>
        <img class="Image" v-lazy="item" src="" v-for="(item, index) in imageArr" :key="index" width="300" height="500"
            alt="">
    </div>
</template>

<script lang="ts" setup>
import { Directive } from "vue"
// 自定义指令图片懒加载

// 引入所有图片
const imageList = import.meta.glob('../../assets/image/*.jpg', { eager: true })
const imageArr = Object.keys(imageList)
// 自定义指令
const vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
    const def = await import('../../assets/vue.svg')
    el.src = def.default
    console.log(el.width, binding.value)
    // 判断元素是否进入可视区域
    const obs = new IntersectionObserver((entry) => {
        // 进入可视区域了
        if (entry[0].intersectionRatio > 0) {
            setTimeout(() => {
                el.src = binding.value
            },1000)
            
            obs.unobserve(el)
        }
    })
    obs.observe(el)




}
</script>

<style lang="scss" scoped>
.Image {
    display: flex;
    flex-direction: column;
}
</style>