vue3-dom-expose v1.0.0

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

withDomExpose 参数类型 IOOption

组件回调返回值类型 DEOption