vue3 监测元素是否到达可视区域 全局指令

export const inView = {
  mounted: (el, bidding) => {
    const { callback } = bidding.value
    const ob = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          callback({ status: 200, message: '进入页面' })
        }
      })
    })
    el && ob.observe(el)
  },
}

使用

<template>
  <div v-inView="{ callback: callback }" class="load-wrap"></div>
</template>

<script setup>
const callback = msg => {
    console.log(msg)
}
</script>

<style lang="less" scoped>

</style>