57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { useIntersectionObserver } from '@vueuse/core';
|
|
import { ref } from 'vue';
|
|
|
|
const loading = ref(false);
|
|
const list = ref<string[]>([]);
|
|
const loadMore = async () => {
|
|
loading.value = true;
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
const items = Array.from({ length: 5 }, (_, i) => `Item ${list.value.length + i + 1}`);
|
|
list.value.push(...items);
|
|
loading.value = false;
|
|
};
|
|
|
|
const target = ref(null);
|
|
const isVisible = ref(false);
|
|
|
|
const { isActive, pause, resume, isSupported } = useIntersectionObserver([target], ([entry]) => {
|
|
isVisible.value = entry?.isIntersecting || false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Card v-for="item in list" :key="item" class="mb-[16px]">
|
|
<template #title>{{ item }}</template>
|
|
</Card>
|
|
|
|
<div ref="target" class="border-[8px] border-blue-500 p-[16px] bg-white dark:bg-gray-800 dark:border-gray-700">
|
|
<Button label="Load more" :loading="loading" fluid @click="loadMore" />
|
|
</div>
|
|
|
|
<ScrollTop />
|
|
<div
|
|
class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white dark:bg-gray-800 dark:border-gray-700"
|
|
flex="~ col"
|
|
items-end
|
|
>
|
|
<label class="checkbox">
|
|
<span mr="[8px]">isSupported: {{ isSupported }}</span>
|
|
<input
|
|
:checked="isActive"
|
|
type="checkbox"
|
|
name="enabled"
|
|
@input="($event.target as HTMLInputElement)!.checked ? resume() : pause()"
|
|
/>
|
|
<span>Enable</span>
|
|
</label>
|
|
<div>
|
|
Element
|
|
<span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400 dark:text-orange-300'">
|
|
{{ isVisible ? 'inside' : 'outside' }}
|
|
</span>
|
|
the viewport
|
|
</div>
|
|
</div>
|
|
</template>
|