基于Vue的延迟加载插件vue-view-lazy

<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 install --save-dev vue-view-lazy

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

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

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