❤
npm
Sign UpSign In

vue-directive-lazy

1.0.9 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i vue-directive-lazy

Repository

github.com/noxxxxxxxx/vue-directive-lazy

Homepage

github.com/noxxxxxxxx/vue-directive-lazy#readme

Weekly Downloads

1

Version

1.0.9

License

MIT

Unpacked Size

93.1 kB

Total Files

9

Last publish

Collaborators

  • brooks2harry
Try on RunKit
Report malware