javascript - 在 VueJS 中观察元素的高度

Question

有没有办法在 VueJS 中设置一个元素高度的观察者？

我正在尝试修复搜索结果页面上的过滤器部分。但如果结果发生变化，则无法找到它并取消修复过滤器。

Answer 1

您可以使用 ResizeObserver并将其集成到您的 Vue 组件中

function observeHeight() {
  const resizeObserver = new ResizeObserver(function() {
     console.log("Size changed");
  });

 resizeObserver.observe(document.getElementById('yourId'));
}

function changeHeight() {
  var elem = document.getElementById('yourId');
  
  console.log('...loading data...')
  setTimeout(function(){ 
    elem.style = "height: 200px";
  }, 3000);
  
}

observeHeight();
changeHeight();

#yourId {
  background-color: beige;
  height: 100px;
}

<div id="yourId">
  
</div>