在开发ellipsis时遇到一个问题,因为ellipsis组件嵌套在 ant-design-vue的tab内,切换tab时,其他的tab会display:none,那么组件内的宽高计算则失效了,为了方便重新激活时二次计算宽高,用于判断是否使用tooltip,使用了IntersectionObserver 是一个JS原生的dom显隐观察

使用实例

IntersectionObserver监听判断dom元素是否在可视区域内

!!!必须在mounted内使用监听,否则dom没渲染,观测不到会报错

 const intersectionObserver = new IntersectionObserver(function(entries) {
   if (entries[0].intersectionRatio <= 0) return;

   console.log('已经进入可视区域')
   console.log('Loaded new items');
 });

// 启用监听
onMounted(() => {
  intersectionObserver.observe(dom元素)
})

// 销毁监听
onBeforeUnmount(() => {
  intersectionObserver.unobserve(wrapRef.value)
  intersectionObserver.disconnect()
})

观察者模式中使用new IntersectionObserver函数,函数中有参数entries,参数为数组,数组中第一项的isIntersecting如果为true代表观察者观察的目标元素在可视区域内,为false代表不在可视区域内。

var observer = new IntersectionObserver(callback[, options]);

参数

  1. callback当元素可见比例超过指定阈值后,会调用一个回调函数,此回调函数接受两个参数:
    1. entries一个IntersectionObserverEntry对象的数组,每个被触发的阈值,都或多或少与指定阈值有偏差。
    2. observer被调用的IntersectionObserver实例。
  2. options 可选一个可以用来配置 observer 实例的对象。

如果options未指定,observer 实例默认使用文档视口作为 root,并且没有 margin,阈值为 0%(意味着即使一像素的改变都会触发回调函数)。你可以指定以下配置:

  1. root监听元素的祖先元素Element对象,其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
  2. rootMargin一个在计算交叉值时添加至根的边界盒 (bounding_box (en-US)) 中的一组偏移量,类型为字符串 (string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的margin 属性等同; 可以参考 The root element and root margin in Intersection Observer API来深入了解 margin 的工作原理及其语法。默认值是”0px 0px 0px 0px”。
  3. threshold规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0,则意味着监听元素即使与根有 1 像素交叉,此元素也会被视为可见。若指定值为 1.0,则意味着整个元素都在可见范围内时才算可见。可以参考Thresholds in Intersection Observer API 来深入了解阈值是如何使用的。阈值的默认值为 0.0。

返回值

一个可以使用规定阈值监听目标元素可见部分与root交叉状况的新的IntersectionObserver 实例。调用自身的observe() 方法开始使用规定的阈值监听指定目标。

方法

IntersectionObserver.disconnect()使IntersectionObserver对象停止监听工作。

IntersectionObserver.observe()使IntersectionObserver开始监听一个目标元素。

IntersectionObserver.takeRecords()返回所有观察目标的IntersectionObserverEntry对象数组。

IntersectionObserver.unobserve()使IntersectionObserver停止监听特定目标元素。

使用示例

var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

原文:https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

发表回复

您的电子邮箱地址不会被公开。