Vue 2.0 懒加载指令 ( Vue lazyload directive )

轻量级 Vue 2.0 懒加载自定义指令； 支持懒加载dom属性； 支持懒加载函数调用； 资源合理释放；

安装：

• ES6

 
npm install vue-directive-lazy --save; 
yarn add vue-directive-lazy;

import lazy from 'vue-directive-lazy';
Vue.use(lazy,{
    error: '',
    loading: ''
});

Constructor Options

|key|description|default|options| |:---|---|---|---| |error|src of the image upon load fail||String |loading|src of the image while loading|data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=|String|

error 参数为空情况下，图片加载失败将默认展示 loading 参数的图片

• 直接引入:

<script src="./vue.js"></script>
<script src="./dist/index.js"></script>

使用 How to use:

常规

<p v-lazy:class="className">延迟绑定className,className会追加在已有class内</p>

<img v-lazy:src="imgSrc">延迟加载图片</p>

<div v-lazy:method="trigger">触发函数调用</div>

new Vue({
	el: "dom",
	data() {
	    return {
	        className: 'customClass',
	        imgSrc: 'http://img.jpg'
	    }
	},
	methods: {
	    trigger: function() {
	        // do something
	    }
	}
});

License

MIT