1.0.2 • Published 3 years ago
vue-cooler-exposure v1.0.2
vue-cooler-exposure
A vue plugin used to exposure elements and record data. Here are the advantages:
- Be lighterweight, just do one thing is that exposure elements
- use the browser native API Intersectionobserver, better performance
- offer hooks which you can deal with the data of elements exposured
Demo
npm install
npm run devRequirements
- Vue 2.x
Installation
npm
npm install vue-cooler-exposureUsage
main.js:
import Vue from 'vue';
import exposurePlugin from 'vue-cooler-exposure';
Vue.use(lazyloadPlugin);
// you can get $exposure in the prototype of Vue and Vue instance.
// register callback which would be called when visibility of some element has changed.
Vue.prototype.$exposure.addAfterRecordCallback
(exposureList => {
console.log(exposureList);
// upload exposureList or some ...
})template:
<div>
<img v-exposure="data1" />
<div v-exposure="data2"></div>
</div>v-exposure would set the data, which you could get it in the callback args, in the element.
Plugin Options
| key | description | default | options |
|---|---|---|---|
| border | the viewport you want to listen | {top: 0, bottom: 0, left: 0, right: 0}(window) | {top, bottom, left, right} |
| threshold | the proportion of element insert into viewport | 1(1 means that when a whole element go into the viewport, callback would be excuted) | 0~1 |
| delay | a delay time for debounce(unit: ms) | 800 | number |
APIs
| key | description | default param | type |
|---|---|---|---|
| addAfterRecordCallback | when visibility of some element has changed, it would be called and the arg is the list of data which elements in viewport take. | null | (exposureList): void |
| exposureCheck | call callback at once | no args | no args |
Compatibility
The compatibility of this plugin depends on compatibility of IntersectionObserver