简介
vue-is-in-view 是一个 Vue.js 组件，可以判断元素是否在可视区域内。通过监听滚动事件，vue-is-in-view 同时支持多个元素的可视区域判断，并且不会对性能产生太大影响。
安装
使用 npm 安装 vue-is-in-view：
npm install vue-is-in-view --save
使用
全局注册
在 main.js 中实现组件全局注册：
import Vue from 'vue' import VueIsInView from 'vue-is-in-view' Vue.use(VueIsInView)
在组件中使用：
-- -------------------- ---- -------
----------
-----
----
------------- ------ -- ---
------------
------------------------------
-------------------
-
-- ---- --
------
------
-----------
--------
------ ------- -
-------- -
--------------- -
-----------------------------------
-
-
-
---------局部注册
仅在需要的组件中注册：
-- -------------------- ---- -------
----------
-----
---- --------------------------------
------
-----------
--------
------ ----------- ---- ----------------
------ ------- -
----------- -
--------- ---------------------
--
-------- -
------------------ -
-------------------------- ---------
-
-
-
---------示例
在代码片段中运行以下代码，可以查看 vue-is-in-view 的效果：
-- -------------------- ---- -------
----------
----
--- -------- -- --- ---------------
---- -----------------------------
------ ------- -------
----- --------- ------
------
-----
-----
-----------
--------
------ ----------- ---- ----------------
------ ------- -
----------- -
--------- ---------------------
--
-------- -
----------------------- -
-- ---------- -
------------------------
- ---- -
------------------------
-
-
-
-
---------总结
vue-is-in-view 可以方便地判断元素是否在可视区域内，是前端开发的一大福音。使用方法简单，性能优越，非常适合运用于 Vue.js 项目中。在实际开发中，可以根据需要灵活调用。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86e7