vue3-dom-expose

基于「intersection-observer」和「vue3」，监听「dom」元素进入可视区。

使用形式

1、组件形式

如果需要监听的元素在一个动态列表中，比如在一个列表页，有上拉加载这种操作；可将数据源传递给组件，这么做的目的，主要是将新添加的元素加入到监听队列中。

import { defineComponent, onMounted, ref } from 'vue'
import DomExpose from 'vue3-dom-expose'

export default defineComponent({
  setup () {
    const dataList = ref([1, 2, 3])

    //「visible」当前被监听的元素是否进入可视区
    //「index」当前被监听元素在其兄弟节点中的下标
    //「dom」当前被监听元素「dom」节点信息
    const onDomExpose = ({ visible, index, dom }) => {
      console.log(visible, index, dom)
    }

    return () => {
      return (
        <DomExpose data={ dataList.value } onExpose={ onDomExpose }>
          { dataList.value.map((text) => <div>{ text }</div>) }
        </DomExpose>
      )
    }
  }
})

2、函数调用形式

import { defineComponent, ref, onMounted } from 'vue'
import { withDomExpose } from 'vue3-dom-expose'

export default defineComponent({
  setup () {
    // 被观察者父元素节点
    const targetParent = ref<HTMLElement>()

    onMounted(() => {
      // 目的元素
      const targets = targetParent.value?.children || []

      // 遍历目标元素
      for (let i = 0; i < targets.length; i++) {
        if (targets[i].bind) continue
        
        // 开启「IntersectionObserver」监听
        // 接收「3」个参数，分别为「目标元素」、「回调函数」、「IOOption」
        withDomExpose(
          targets[i], 
          visible => {
            console.log(visible)
          },
          IOOption
        )
      }
    })

    return () => {
      return (
        <div ref={ targetParent }>
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
      )
    }
  }
})

类型定义

组件导出如下类型：
import type { IOOption, DEOption } from 'vue3-dom-expose'

组件 Props

| 参数 | 说明 | 类型 | 默认值 | | ------- | ---------------------------- | ------------ | -------- | | once | 是否只在目标元素第一次进入页面监听一次 | boolean | true | | root | 根元素，可视性以哪个root元素，作为参考系；如果未指定或者为null，则默认为浏览器视窗 | HTMLElement | null | | threshold | 目标元素与根元素的交叉比例 | Array | [0] | | rootMargin | 用来定义根元素的 margin，用来扩展或缩小 rootBounds 这个矩形的大小 | string | '0px 0px 0px 0px' | | data | 数据源 | Array | [] |

withDomExpose 参数类型 IOOption

| 参数 | 说明 | 类型 | 默认值 | | ------- | ---------------------------- | ------------ | -------- | | once | 是否只在目标元素第一次进入页面监听一次 | boolean | true | | root | 根元素，可视性以哪个root元素，作为参考系；如果未指定或者为null，则默认为浏览器视窗 | HTMLElement | null | | threshold | 目标元素与根元素的交叉比例 | Array | [0] | | rootMargin | 用来定义根元素的 margin，用来扩展或缩小 rootBounds 这个矩形的大小 | string | '0px 0px 0px 0px' |

组件回调返回值类型 DEOption

| 键名 | 说明 | 类型 | | ------- | ---------------------------- | ------------ | | visible | 当前被监听的元素是否进入可视区 | boolean | | index | 当前被监听元素在其兄弟节点中的下标 | number | | dom | 当前被监听元素「dom」节点信息 | HTMLElement |