rollup 打包的 vue 版本的 lazy-load-img 图片懒加载插件

1,204 阅读1分钟
原文链接: github.com

关于

本插件基于lazy-load-img的vue版本实现,请到lazy-load-img查看文档

开发

npm install 
npm run dev

使用

  • 支持AMD、CMD、和页面直接引入使用,下面只列出CMD的使用教程
// npm install --save-dev lazy-load-img 
// npm install --save-dev vue-lazy-load-img

import Vue from 'vue'
import VueLazyLoadImg from 'vue-lazy-load-img'

Vue.use(vue-lazy-load-img)
<vue-lazy-load-img 
    mode="diy"
    :time="300"
    :complete="true"
    :position="{ top: 0, right: 0, bottom: 0, left: 0 }"
    :diy="{ backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' }"
    @before="before" 
    @success="success" 
    @error="error">
    <img src="./images/default.png" data-src="./images/test.png" alt="">
</vue-lazy-load-img>