https://github.com/herrmannplatz/vue-mixin-in-viewport

Vue 2.0 mixin to observe the visibility of a component
https://github.com/herrmannplatz/vue-mixin-in-viewport

Last synced: about 2 months ago
JSON representation

Vue 2.0 mixin to observe the visibility of a component

• Host: GitHub
• URL: https://github.com/herrmannplatz/vue-mixin-in-viewport
• Owner: herrmannplatz
• License: mit
• Created: 2017-09-17T08:14:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-18T09:27:54.000Z (over 7 years ago)
• Last Synced: 2024-08-15T13:15:01.017Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 16.6 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-mixin-in-viewport

Vue 2.0 mixin to observe a components visibilty using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

## Note

This mixin requires the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). In case you want to support older browsers, there is `vue-mixin-in-viewport.polyfill.js` which comes with a [polyfill](https://www.npmjs.com/package/intersection-observer).

## Installation

```bash

$ npm install vue-mixin-in-viewport

```

## Usage

```js

// without polyfill

import inViewportMixin from 'vue-mixin-in-viewport'

// with polyfill

import viewportMixin from 'vue-mixin-in-viewport/dist/vue-mixin-in-viewport.polyfill'

Vue.component('avatar-component', {

  template: '#avatar-component',

  mixins: [inViewportMixin]

})

```

```html

```

## Props

| Name | Type | Default | Description |

| :------------- | :--------- | :--------- | :------------- |

| root | String | null | Selector specifying element that is used as the viewport for checking visiblity of the target. |

| rootMargin | Number | 0 | Margin around the root. |

| threshold | Number | 0 | Indicates at what percentage of the target's visibility the observer's callback should be executed. |

| once | Boolean | false | Fire only once. |

## Data

| Name | Type | Description |

| :------------- | :--------- | :------------- |

| inViewport | Boolean | `true` if component is in viewport |

## Events

| Name | Description |

| :------------- | :------------- |

| viewport-enter | Fires when target enters the viewport/root element. |

| viewport-change | Fires when target enters or leaves the viewport/root element. |

| viewport-leave | Fires when target leavs the viewport/root element. |

## License

[MIT](http://opensource.org/licenses/MIT)