在 vue 3 中听听 this.$el.clientHeight

Question

在 vue3 中，当ever

this.$el.clientHeight

>

window.innerHeight

时，我需要将页脚粘在底部。
由于我的网站有一张大海报需要加载，并且将来可能存在其他事情，因此

mounted()

期间判断一次是不够的。

我目前的做法真的很尴尬：使用计时器。
在方法中：

footerSticky() {
  if (this.$el.clientHeight < window.innerHeight) {
    this.$refs.footer.classList.add('sticky-footer');
    } else {
    this.$refs.footer.classList.remove('sticky-footer');
  }
}

安装中：

setInterval(this.footerSticky, 500);

但是我想讨论一下监听者/观察者的方法。在与 gpt 斗争并搜索堆栈溢出一段时间后，我现在放弃并去这里问问题。

Answer 1

我建议使用调整大小观察者 API 根据调整大小执行操作：

https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

在 Vue 中执行此操作的推荐方法是

https://vueuse.org/core/useResizeObserver/

在您的情况下，您可以将元素大小的值绑定到两个

ref

，然后使用

computed

创建计算引用，然后使用

effect

或

watch

触发文档更改。

但要注意无限循环：在 UI 中添加/删除元素可能会导致重新渲染不同大小的元素，最终可能会反转更改并再次触发重新渲染...