55 lines
1.0 KiB
JavaScript
55 lines
1.0 KiB
JavaScript
|
import Vue from 'vue'
|
||
|
|
|
||
|
|
export default Vue.extend({
|
||
|
|
name: 'FtIntersectionObserver',
|
||
|
|
props: {
|
||
|
|
checkOnMount: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
margin: {
|
||
|
|
type: String,
|
||
|
|
default: '0px 0px 0px 0px'
|
||
|
|
},
|
||
|
|
observeParent: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
threshold: {
|
||
|
|
type: Number,
|
||
|
|
default: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
const observer = new IntersectionObserver(this.handleIntersection, {
|
||
|
|
rootMargin: this.margin,
|
||
|
|
threshold: this.threshold
|
||
|
|
})
|
||
|
|
const runOnce = false
|
||
|
|
|
||
|
|
return {
|
||
|
|
observer,
|
||
|
|
runOnce
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.observer.observe(this.observeParent ? this.$refs.elem.parentElement : this.$refs.elem)
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
this.observer.disconnect()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleIntersection(entries) {
|
||
|
|
if (!this.runOnce) {
|
||
|
|
this.runOnce = true
|
||
|
|
|
||
|
|
if (!this.checkOnMount) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$emit(entries[0].isIntersecting ? 'intersected' : 'unintersected')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|