在 VueJS 中观察元素的高度

新手上路,请多包涵

有什么方法可以在 VueJS 中的元素高度上设置观察者吗?

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

原文由 Saeed 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 391
2 个回答

在搜索结果返回数据后,您可以通过 $ref.yourElement.clientHeight 获取高度。有了它,您可以将高度设置为数据部分的一部分,然后从那里应用一个观察者。检查 这个例子

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

原文由 jparaya 发布,翻译遵循 CC BY-SA 4.0 许可协议

您可以使用 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>

原文由 Paul 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题