关于前端: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 装置

间接应用

<div id="app">
    <span v-view-lazy @model="handleModel"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./dist/vue-view-lazy.min.js"></script>
<script>
    Vue.use(vViewLazy.default,{});
    new Vue({
        el:'#app',
        data:{msg:'数据'},
        methods:{handleModel(){console.log('呈现了');
            },
        },
    })
</script>

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 文件

<template>
    <ul id='img'>
        <li class="in" v-for="(item,i) in imgs" :key="i">
            <img src="#" alt="图片" v-view-lazy="item.src">
        </li>
    </ul>
</template>

<script>
    export default {data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                imgs:[{src:'../../static/images/img1.jpg'},
                    {src:'../../static/images/img2.png'},
                    {src:'../../static/images/img2.jpg'},
                    {src:'../../static/images/img3.jpg'},
                    {src:'../../static/images/img4.jpg'},
                    {src:'../../static/images/img5.jpeg'},  
                ]
            }
        },
        mounted(){},
    }
</script>
<style scoped>
    ...
</style>

懒加载数据

.vue 文件

<template>
    <div>
        <!--@model 自定义事件是在该 dom 在第一次呈现在视口内时触发的办法 -->
        <!--v-view-lazy='method' 或 v-view-lazy='(e)=>method(e,...arg)'-->
        <div  class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="(e)=>getAjaxContent(e,v.msg)">
            loading...
        </div>
        <div  class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="getAjaxContent()">
            loading...
        </div>
    </div>
</template>

<script>
    export default {data(){
            return{msg:[]
            }
        },
        mounted(){fetch('http://localhost:3000/test').then(res=>res.json()).then(res=>{this.msg = res;})
        },
        methods:{getAjaxContent(event,msg){event.innerText = msg},
        }
    }
</script>

<style scoped>
    .cnt {
        /*background: #ececec;*/
        height: 500px;
        margin-bottom: 50px;
    }
</style>