Skip to content

Instantly share code, notes, and snippets.

@xvaara
Created September 13, 2022 03:26
Show Gist options
  • Save xvaara/5e03150a9ac44ec31d0ae86ed47e2fc7 to your computer and use it in GitHub Desktop.
Save xvaara/5e03150a9ac44ec31d0ae86ed47e2fc7 to your computer and use it in GitHub Desktop.
vue lazy componennt
<template>
<component
:is="tag"
ref="wrapper"
:style="{
minWidth: '1px',
minHeight: '1px',
}"
>
<slot v-if="show" />
<slot v-if="!show" name="placeholder" />
</component>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
const props = defineProps({
tag: {
type: String,
default: 'div',
},
})
const show = ref(false)
const wrapper = ref(null)
const { stop, isSupported } = useIntersectionObserver(
wrapper,
([{ isIntersecting }]) => {
console.log('isIntersecting', isIntersecting)
if (isIntersecting) {
show.value = true
// observerElement.unobserve(wrapper.value)
stop()
}
},
)
onMounted(() => {
if (!isSupported)
show.value = true
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment