vue-visibility-track

A Vue.js directive helps track elements's visibility.

Installing

Using npm:

npm install --save vue-visibility-track

Using yarn:

yarn add vue-visibility-track

Using CDN:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-visibility-track"></script>

Usage

Install the directive by Vue.use(), here you can define the global callback function:

import Vue from "vue";
import VueVisibilityTrack from "vue-visibility-track";

Vue.use(VueVisibilityTrack, {
    callback(isVisible, value) {
        // Do something when the element's visibility is changed
        console.log(isVisible);
        console.log(value); // -> "Hello, world!"
    }
});

If you are using the CDN version:

window.Vue.use(window.VueVisibilityTrack, {
    callback(isVisible, value) {
        // Do something when the element's visibility is changed
        console.log(isVisible);
        console.log(value); // -> "Hello, world!"
    }
});

Use v-visibility-track on an element:

<div v-visibility-track="{callbackValue: 'Hello, world!', callback: yourCallbackMethodName}"></div>

Handle visibility change event:

new Vue({
    methods: {
        yourCallbackMethodName(isVisible, value){
            // Do something when the element's visibility is changed
            console.log(isVisible);
            console.log(value); // -> "Hello, world!"
        }
    }
});

If you want track the visibility change event only ONE time, add the once modifier. And use VueVisibilityTrack.reset() method to reset:

<div v-visibility-track.once="{callbackValue: 'Hello, world!', callback: yourCallbackMethodName}"></div>

License

Licensed under the MIT License. See LICENSE in the project root for license information.