vue通过自定义指令判断当前元素是否在可视区域

背景：

类似百度百科那样的结构展示组件，静态Html展示没啥问题，但是有的涉及到动态展示，比如一些报表组件和echarts组件展示，节点多了页面接口会一次性请求然后全部渲染，这样会造成页面卡顿，体验很不好。
源于之前提的一个问题：https://segmentfault.com/q/1010000043651218

解决问题过程

初次想到的办法是：

将动态渲染的组件加一个类名然后通过document.querySelectorAll()获取到全部的dom，页面滚动的时候通过遍历获取到的dom，判断当前dom是否在可视区域内，这种是可以判断当前组件进入的可视区域，但是没法和组件的参数关联，尝试多种方法关联最后失败告终。

后来在网上找到一个自定义指令插件：

vue-view-lazy

原文链接：gitee.com

基于vue的懒加载插件

目的：图片或者其他资源进入可视区域后加载

注意

该插件依赖IntersectionObserver API，如需在较低版本浏览器运行，需要引入 polyfill

安装使用

1. 直接下载dist目录下的vue-view-lazy.min.js使用
2. 使用npm安装

直接使用

npm:

$ npm install --save-dev vue-view-lazy

引入vue-view-lazy

.main文件

import vView from 'vue-view-lazy'
Vue.use(vView,{
    error:'../../static/images/loading.png',
    loading:'../../static/images/loading.gif',
});

懒加载图片

.vue文件

懒加载数据

.vue文件

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net