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 dev

Requirements

• Vue 2.x

Installation

npm

npm install vue-cooler-exposure

Usage

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

License

MIT