前言
在前端开发中，我们经常需要监听元素是否可见，常用的手段是Intersection Observer API，但是由于该API不兼容IE、Safari和QQ浏览器等部分浏览器，因此需要使用polyfill进行兼容，而 vuejs-vue-observe-visibility-polyfill 就是一个基于Intersection Observer API的polyfill。
安装
在项目目录下执行以下命令：
npm install vue-observe-visibility-polyfill
或者使用yarn:
yarn add vue-observe-visibility-polyfill
使用
在Vue组件中引用：
-- -------------------- ---- -------
------ -------------------- ---- ----------------------------------
------ ------- -
----------- -
------------------ ---------------------
--
-------- -
---------- -
-----------------------
--
--
--在模板中使用：
<template> <div v-observe-visibility="callback"></div> </template>
这样，在<div>元素被Intersection Observer API在viewport中检测到，触发回调函数callback。
指令选项
v-observe-visibility支持以下指令选项：
once: 指令刚刚绑定到元素上时，会立刻执行回调。当该值为true时，只会执行一次；当该值为false时，每次元素进入viewport都会执行回调。默认值为false。debounce: 指令执行回调前的防抖时间，单位是毫秒。默认值为500毫秒。如果该值为0，则取消防抖处理。throttle: 指令执行回调前的节流时间，单位是毫秒。默认值为500毫秒。如果该值为0，则取消节流处理。intersection: 可以为空数组、字符串、选择器字符串、Element、NodeList 或一个 Vue 实例数组。这决定了要观察哪一个IntersectionObserverEntry。默认情况下，观察宿主元素。示例：
<template>
<div v-observe-visibility="{debounce: 10, intersection: '#id1, #id2', callback}"></div>
</template>示例
完整的Vue组件及模板使用示例：
-- -------------------- ---- -------
----------
-----
----
--- -------------------------------- ----- --------- ---------------------------
--- -------------------------------- ----- ------------- ------- ------- --------- --------------
-----------
-----
-----
------
-----------
--------
------ -------------------- ---- ----------------------------------
------ ------- -
----------- -
------------------ ---------------------
--
-------- -
---------------------- ------ -
-----------------------
-------------------
--
--
--
---------总结
vuejs-vue-observe-visibility-polyfill库是一个强大的Intersection Observer API的polyfill，让我们的应用更好的跨浏览器运行，并且还提供了丰富的指令选项，可以更好的控制回调事件的触发方式。尽管有些浏览器无法支持Intersection Observer API，但是通过使用这个polyfill，我们现在可以在任何浏览器上使用Intersection Observer API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b85