观看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>

Answer 2

搜索结果返回数据后，可以使用$ ref.yourElement.clientHeight获取高度。这样一来，您可以将高度设置为数据{}部分的一部分，然后从那里应用观察者。检查这个例子

new Vue({
  el: '#app',
  data: {
    height: 0
  },
  methods: {
    calculateHeight() {
      this.height = this.$refs.app.clientHeight;
    }
  }
});