vue-cooler-exposure

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