VUE 3 怎么检查元素是否在视口中？

Question

VUE 3 怎么检查元素是否在视口中？

javascriptvue.jsvuejs3

5

我正在寻找解决方案，可以检查页面上的给定元素是否在视口内。在互联网上有很多针对Vue 2版本的现成解决方案，但我找不到适用于Vue 3的东西。我可以使用原生JS来实现，但我只是在学习Vue 3框架，不知道如何正确地实现它。请帮忙。

- Grzyb9k

1

这是应用于元素引用的 IntersectionObserver。我不知道有哪些库可以在3中实现此功能（如果专门询问库，则超出了 SO 的主题范围）。但是，如果有这样的库，它们很可能会以此方式实现。 - Estus Flask

对于Vue3，请使用此链接 https://github.com/Akryum/vue-observe-visibility/tree/next ，该链接由Vue核心团队成员创建。 - Coz

“v-on:ready”指令在Vue 2中毫不费力地完成了此操作。对于Vue3，对此问题的兴趣和解决方案的匮乏令人有些困惑。所有在这里提出的解决方案都涉及添加第三方实用程序、polyfills等。它是一个反应性框架......为什么需要添加更多内容以获取诸如当元素（而不是完整组件）可见时的回调之类的基本事物？ - NFB

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wouter · Accepted Answer

对于Vue 3来说，有一个非常受欢迎的Vue组合工具集合，叫做https://vueuse.org/。它包含了实用工具https://vueuse.org/core/useElementVisibility/，这可能就是您在寻找的内容。它附带了一个很好的代码示例说明如何使用它，并提供源代码链接，以便您可以了解其实现方式。