|
- // Mixins
- import Toggleable from '../../mixins/toggleable'; // Directives
-
- import intersect from '../../directives/intersect'; // Utilities
-
- import mixins from '../../util/mixins';
- import { convertToUnit, getSlot } from '../../util/helpers';
- export default mixins(Toggleable).extend({
- name: 'VLazy',
- directives: {
- intersect
- },
- props: {
- minHeight: [Number, String],
- options: {
- type: Object,
- // For more information on types, navigate to:
- // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- default: () => ({
- root: undefined,
- rootMargin: undefined,
- threshold: undefined
- })
- },
- tag: {
- type: String,
- default: 'div'
- },
- transition: {
- type: String,
- default: 'fade-transition'
- }
- },
- computed: {
- styles() {
- return {
- minHeight: parseInt(this.minHeight) ? convertToUnit(this.minHeight) : this.minHeight
- };
- }
-
- },
- methods: {
- genContent() {
- const slot = getSlot(this);
- /* istanbul ignore if */
-
- if (!this.transition) return slot;
- const children = [];
- if (this.isActive) children.push(slot);
- return this.$createElement('transition', {
- props: {
- name: this.transition
- }
- }, children);
- },
-
- onObserve(entries, observer, isIntersecting) {
- if (this.isActive) return;
- this.isActive = isIntersecting;
- }
-
- },
-
- render(h) {
- return h(this.tag, {
- staticClass: 'v-lazy',
- attrs: this.$attrs,
- directives: [{
- name: 'intersect',
- value: {
- handler: this.onObserve,
- options: this.options
- }
- }],
- on: this.$listeners,
- style: this.styles
- }, [this.genContent()]);
- }
-
- });
- //# sourceMappingURL=VLazy.js.map
|