# vue2-lazy

> A vue lazy load image component

Latest version **1.0.2** (published 2018-04-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-lazy
pnpm add vue2-lazy
yarn add vue2-lazy
bun add vue2-lazy
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-04-20 |
| First published | 2018-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 1 |
| Unpacked size | 135.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | alexlees |
| Maintainers | alexlees |
| Keywords | lazyload, image, vue, components |

## Links

- npm: https://www.npmjs.com/package/vue2-lazy
- Repository: https://github.com/alexlees/vue2-lazy
- npm.io page: https://npm.io/package/vue2-lazy

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.2

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-04-20
- 1.0.1 — 2018-04-13
- 1.0.0 — 2018-04-10

## README

# vue2-lazy

> A vue lazy load image component

# [demo](https://alexlees.github.io/vue2-lazy/demo/)

## Build Setup

``` bash
# install dependencies
npm i vue2-lazy -s || yarn add vue2-lazy
```

***

```javascript
// main.js
import Vue from 'vue'
import lazyLoad from 'vue2-lazy'
import ERRIMAGE from 'path/to/err.png'

const option = {
  aspectRatio: 1, // 默认图片宽高比
  err: ERRIMAGE,  // 默认加载错误图
  loadTime: 1000  // 默认加载时机
}
Vue.use(lazyLoad， option) // 建议传递option对象 适配项目

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

```

***

```html
 <!-- app.vue -->
<template>
  <div id="app">
    <someThingYourComponents/>
    <!-- 建议全局修改默认aspectRatio -->
    <lazyLoad src="path/to/image.png"/>
    <!-- slot自定义loading -->
    <lazyLoad src="https://img.mukewang.com/5ad015060001608909360316.jpg">
      <span slot="icon">hello</span>
    </lazyLoad>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

```

***

## props

| name | desc | type | default | required |
| :--: | :--: | ---: | :-----: | :------: |
| aspectRatio | 宽高比 | Number | 1 | false |
| src | 目标图片src | String | '' | true |
| err | 请求图片错误展示图 | String(url || base64) | 默认错误图(base64) | false |
| loadTime | 异步请求图片延迟 | Number(ms) | 1000 | false |

## event
| name | desc | prams |
| :--: | :--: | ---: |
| err | 图片加载错误 | 错误原因 |

## slot
| name | desc | tips |
| :--: | :--: | ---: |
| icon | loading 组件 | 需要自己写动画 |

## option

| name | desc | recommend |
| :--: | :--: | ---: |
| aspectRatio | 重写props默认宽高比 | true |
| err | 重写props错误图片 | true |
| loadTime | 重写props异步加载时机 | true |

## Tips

1. 强烈建议传递aspectRatio 可以更好适配布局，不会引起重流
2. Vue.use(lazyLoad, option)  可以传递option对象 重写 props default 修改全局默认图片宽高比， 错误展示图， 图片延迟
3. 通过slot icon 插槽 自定义 loading动画


## TODO
[ x ]  demo演示
[  ]   多种load效果
[ x ]  自定义load(slot)
[  ]   解决向上滚动 懒加载

---
_Source: https://npm.io/package/vue2-lazy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._