vue3+ts自定义指令

<template>
  <div>
    <div class="img-box">
      <img
        width="360"
        height="500"
        v-for="item in arr"
        v-lazy="item"
        :key="item"
        alt=""
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { Directive } from "vue";
// glob是懒加载模式
let imageList: Record<string, { default: string }> = import.meta.glob(
  "../assets/images/*.*",
  {
    eager: true,
  }
);

console.log(imageList, "6666666666666");

let arr = Object.values(imageList).map((v) => v.default);

let vLazy: Directive<HTMLImageElement, string> = async (el, bingding) => {
  const def = await import("../assets/vue.svg");
  el.src = def.default;
  const observer = new IntersectionObserver((err) => {
    if (err[0].intersectionRatio > 0) {
      el.src = bingding.value;
      observer.unobserve(el);
    }
  });
  observer.observe(el);
};
</script>
<style scoped lang="scss">
.img-box {
  width: 400px;
  height: 600px;
  box-sizing: border-box;
  overflow-y: scroll;
}
</style>