chore: enhance is visible

Author: openscript

components/IsVisible.vue

@@ -1,40 +1,13 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { ref } from 'vue'
+import { useElementVisibility } from '@vueuse/core'
 
-const slotWrapper = ref<HTMLElement>()
-const isVisible = ref(false)
-const observer = ref<IntersectionObserver>()
-
-function show() {
-  isVisible.value = true
-}
-
-function hide() {
-  isVisible.value = false
-}
-
-onMounted(() => {
-  observer.value = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting)
-        show()
-      else
-        hide()
-    })
-  }, { threshold: 0.1 })
-
-  if (slotWrapper.value)
-    observer.value.observe(slotWrapper.value)
-})
-
-onBeforeUnmount(() => {
-  if (observer.value)
-    observer.value.disconnect()
-})
+const target = ref(null)
+const targetIsVisible = useElementVisibility(target)
 </script>
 
 <template>
-  <div ref="slotWrapper">
-    <slot v-if="isVisible" />
+  <div ref="target">
+    <slot v-if="targetIsVisible" />
   </div>
 </template>