vue-view-observer

View Observer for Vue

Install

yarn add vue-view-observer
# or
npm i vue-view-observer

How to use ?

1. import vue-view-observer in main.js

import vueViewObserver from 'vue-view-observer';

Vue.use(vueViewObserver);

2. Use vue-view-observer in vue

<vue-view-observer @subscribe="subscribe">
  <!-- some context here ... -->
</vue-view-observer>

3. Event Function

methods: {
  subscribe(intersecting) {
    console.log(`show context: ${intersecting}`)
  }
}

4. Full Mode

<vue-view-observer @subscribe="subscribe" :full="true">
  <!-- some context here ... -->
</vue-view-observer>

methods: {
  subscribe(intersecting, entry) {
    if (intersecting && entry.intersectionRatio === 1) {
      console.log(`full access: ${entry.target}`);
    }
  }
}