首先先贴出插件github地址：https://github.com/hilongjw/vue-lazyload
以及其使用案例地址：http://hilongjw.github.io/vue-lazyload/（这里不得不吐槽下，貌似没看到源码，只有他线上的demo，源码都是打包过后的了）
一、mint-ui 中的所使用的v-lazy指令依赖于 vue-lazyload插件
还有件事情不得不说下，笔者在使用了此插件时，还使用了mint-ui,然而mint-ui中的懒加载部分的插件使用的就是此插件，但是mint-ui官网对于这部分的使用介绍的很少，而我的业务需求又刚好需要过滤器图片资源拼接部分
二、使用mint-ui 的情况下，安装vue-lazyload会导致mint-ui引入失败。
1. 由于mint-ui在我的工程中并未使用到，所以这里我将mint-ui移除，重新安装vue-lazyload
2. 如果需要mint-ui 库的小伙伴可以尝试下，仅仅使用 mint-ui 实现懒加载，当然他的使用规则，以及一些属性的资料可以参考vue-lazyload插件，毕竟是依赖关系。
3. 切记不可在引入了mint-ui的情况下，再引入vue-lazyload，他们之间会有冲突。
三、使用方法
1. 安装
npm ：

    npm install vue-lazyload -D

 yarn:

yarn add vue-lazyload -D

2.基本使用

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  // 图片加载异常时，注意开发过程中如果图片放置在assets目录下，图片资源需
  // 要使用require()的方式路径引入
  error: 'dist/error.png', 
  // 图片加载中，中间段显示，和error一样，如果是assets目录下，需要使用
  // require()引入
  loading: 'dist/loading.gif',
  attempt: 1，
  filter:{
   // 通过这个方法可以对我们的图片资源路径进行修改
    webp(listener,options){
      let baseImageUrl = '/baseImagePath/image?'
       listener.src = baseImageUrl + listener.src;
   }
  }
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

使用过程中注意参数preLoad（预加载高度），这个参数我在使用过程中发现，只对第一张图片有效，第二张图片加载会失效，添加了这个属性的情况下，具体为何会导致如此（图片路径已经确认无误了，但是还是一直处于加载中），还需要进一步看源码查看原因或者提问issue给作者反馈