# vue3视频图片懒加载

```js
将在用户规定区域内懒加载图片视频，并且图片将有相对应的加载占位图和错误占位图，8kb轻量级框架
```

## 配置项：

    loading：图片加载时的占位图url地址  String
    error：图片加载失败占位图url地址 String
    payload：加载响应区域，默认为1.3，即为整个窗口加上百分之30 Number

## 案例:

    main.js:{
    	import createLazyLoad from "v3-lazyload-hyw";
    
        const app =  createApp(App)
    
        const lazyOption = {
            //...
            loading:'',
            error:'',
            payload:1.3
        }
        app.directive('lazyload',createLazyLoad(lazyOption))
    }
    
    图片懒加载：<img v-lazyload='图片路径' />
    视频懒加载：<video v-lazyload='视频路径' controls>
    
    自定义事件捕捉状态：
    <img
    	controls
    	v-lazyload="item.src" 
    	@lazyError="console.log('error!')"
    	@lazyLoading="console.log('loading!')"
    	@lazySuccess="console.log('success!')"
    />
    
    在模板中使用console：
    vue2：
    data(){
    	return{
    		console:console
    	}
    }
    
    vue3:
    setup(){
    	return{
    		console,
    	}
    }

## 版本

```js
v1.5.6

修复vue响应式导致的问题

此包将持续维护和更新，如有需求，bug，交流，源码等请加vx：chibawangc
```