监测DOM元素尺寸大小变化，动态计算元素位置信息——vue

最新推荐文章于 2024-10-24 16:02:03 发布

原创最新推荐文章于 2024-10-24 16:02:03 发布 · 958 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 3 个专栏收录

4 篇文章

订阅专栏

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

一、情况描述：

其实在网页的布局中我们时常会使用到以下这样的排版方式

（文本一 => 图片一 => 文本二 => 图片二 ...）

这样就会浮现一个问题，如果网页大小一直是不变，也就是说不改变当前网页宽高的情况下，这样的布局是没有问题的，可是，一旦对网页进行缩放的话，因为当前文本和图片的距离是固定的，所以就会出现错位和相距过大或过小的情况

那么在这种情况下，我们就应该去动态的去计算当前两个文本之间的距离，然后根据计算好的距离去将图片放置在一个合适的位置。

二、上代码：

const translatep = ref("110px");
const arr_text = reactive(['我是第一', '我是第二', '我是第三', '我是第四']);

let end = 0;
let start = 0;

const translateData = (divF: any) => {
  divF.forEach((item: any, index: number) => {
    if (index === 0 || index === 1) {
      if (index === 1) end = item.getBoundingClientRect().x
      if (index === 0) start = item.getBoundingClientRect().x
    }
  })
  translatep.value = (end - start - 50) / 2 + 50 - 12.8 + 'px'
  console.log((end - start - 50) / 2 + 50 - 12.8 + 'px')
}

onMounted(() => {
  let divF = document.querySelectorAll(".span-flex .trend-point-wrap-item");
  translateData(divF)
  let deRest = debounce(() => translateData(divF))
  window.addEventListener("resize", () => { 
  translateData(divF)
  })
})

三、分析：

item.getBoundingClientRect().x 返回元素的大小及其相对于视口的位置。
(end - start - 50) / 2 + 50 - 12.8 + 'px'

end：文本二视口左上角x坐标

start：文本一视口左上角x坐标

50：文本的宽度（一般都是一样的）

/2：两个文本中间的位置

12.8：文本宽度的一半（我这里文本宽为25.6px）

四、问题：

虽然上述代码确实可以做到动态计算这个功能，但是就目前而言，还是有两点问题：

如果频繁的去改变网页的宽度，那么就会一直进行计算，浪费资源
因为使用的是 window.addEventListener("resize",() => {})，在监听窗口变化时，固然起到很好的效果，但是对于网页性能消耗过大。因为html中每个标签的变化，都会触发当前监听事件。

五、优化：

问题一：可以使用防抖函数去处理解决。

//防抖
const debounce = <T>(fn: (...args: any[]) => T, delay = 500) => {
  let timer: number | null = null;
  let result: T | null = null;
  return (...args: any[]) => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = window.setTimeout(() => {
      result = fn(...args);
    }, delay);
    return result;
  };
}

let deRest = debounce(() => translateData(divF))

deRest()

问题二：需要使用到 ResizeObserver （对指定element和svgelement元素进行监听）

  let element: any = document.querySelector('.span-flex')
  var ro = new ResizeObserver(entries => {
    for (let _entry of entries) {
      deRest()
    }
  });
  // 观察一个或多个元素
  ro.observe(element);
})